ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js前端之导出数据至execl及csv文件

2022-01-28 16:05:46  阅读:137  来源: 互联网

标签:execl title Data js CurrentDate length var csv data


****************************导出execl文件*****************************

导出execl,包括涉及单元格操作;两步操作

1.<input class="down-btn" onclick="ExportToExecl()" type="button" value="导出" /> //该触发事件

function ExportToExecl(){
  jsono = [];
  cellMerges = [];

  //计算导出的数据总列数
  var headEntity1 = {"Column0":"","Column1":"","Column2":"","Column3":"","Column4":"","Column5":"","Column6":"","Column7":"","Column8":"","Column9":"","Column10":""};
  jsono.push(headEntity2);
  var cellEntity1 = {s:{c:0,r:0},e:{c:10,r:0}}; //s的c为开始合并的单元格起始列,e的c为开始合并单元格的最后一列
  cellMerges.push(cellEntity1);
  //空行
  jsono.push(headEntityEmpty);
  var cellEntityEmpty = {s:{c:0,r:jsono.length-1},e:{c:10,r:jsono.length-1}};
  cellMerges.push(cellEntityEmpty);
  //列
  var tempEndEntity11 = {"Column0":"Manufacturer/供应商","Column1":"","Column2":"","Column3":"","Column4":"","Column5":"","Column6":"待定","Column7":"","Column8":"","Column9":"","Column10":""};
  jsono.push(tempEndEntity11);
  var cellEntityEnd110 = {s:{c:0,r:jsono.length-1},e:{c:5,r:jsono.length-1}};
  var cellEntityEnd210 = {s:{c:6,r:jsono.length-1},e:{c:10,r:jsono.length-1}};
  cellMerges.push(cellEntityEnd110);cellMerges.push(cellEntityEnd210);
  downloadExl();
}

2.公用方法直接复制粘贴:

function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式
  var tmpa = document.createElement("a");
  tmpa.download = fileName || "下载";
  tmpa.href = URL.createObjectURL(obj); //绑定a标签
  tmpa.click(); //模拟点击实现下载
  setTimeout(function () { //延时释放
    URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
  }, 100);
}

var cellMerges = []; //单元格数组

const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary' };//这里的数据是用来定义导出的格式类型
function downloadExl(data, type) {
  data = jsono;
  var wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
  // wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(data);//通过json_to_sheet转成单页(Sheet)数据
  data = format2Sheet(data);
  data["C2"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } },
    fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };//<====设置xlsx单元格样式
  data["!merges"] = [{//合并第一行数据[B1,C1,D1,E1]
    s: {//s为开始
      c: 1,//开始列
      r: 0//开始取值范围
    },
    e: {//e结束
      c: 4,//结束列
      r: 0//结束范围
    }
  }];
  data["!merges"] = cellMerges;
  //20220121
  wb=format2WB(data,'Sheet1');
  // data["!ref"]="A1:E7";
  // wb.Sheets['Sheet1'] = data;
  saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), "execl数据导出" + '.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
}
function s2ab(s) {
  if (typeof ArrayBuffer !== 'undefined') {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  } else {
    var buf = new Array(s.length);
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
}

function format2Sheet(json, n, r, keyMap, t) {
  keyMap = keyMap || Object.keys(json[0]);
  var types = (t == undefined ? ((v) => (({ "number": "n", undefined: "s", "boolean": "b","string":"s" })[typeof v])||"s") : t);
  n = n || 0;
  r = r || 0;
  var tmpdata = {};//用来保存转换好的json
  var t1 = json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
  v: v[k],
  position: ((j + n) > 25 ? xlsxUtils.getCharCol((j + n)) : String.fromCharCode(65 + (j + n))) + (i + 1 + r),
  }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
  v: v.v,
  t: types?types(v.v):"s"
  });
  return tmpdata;
}
function format2WB(sheetData, title, wb, ref) {
  title = title || "mySheet";
  var outputPos = Object.keys(sheetData);
  if (!wb) wb = { Sheets: {}, SheetNames: [] };
  wb.SheetNames.push(title);
  wb.Sheets[title] = Object.assign({}, sheetData, {
  '!ref': ref || (outputPos[0] + ':' + outputPos.reverse().find(_=>_.indexOf("!")==-1))//设置填充区域
  });
  return wb;
}

***********************************导出csv文件******************************

function DownCurveLoad(){
  var dataList = [];
  var title = [
    {title:"Date;AFO;ID no.;Status;Attribute;Unit;Data row",field:"Data"}
  ];
  var tempX = {};
  var tempY = {};
  tempX.Data = tempY.Data = new Date(parentData[0].OPERATEDATE +" "+parentData[0].OPERATETIME).format('yyyy-MM-dd hh:mm:ss')+";" ;//todo数据操作
  tempX.Data += parentData[0].PROGRAMNUM+";"; tempY.Data += parentData[0].PROGRAMNUM+";";
  tempX.Data += parentData[0].PARTSERIALNUM+";"; tempY.Data += parentData[0].PARTSERIALNUM+";";
  tempX.Data += parentData[0].TOTLERESULT+";"; tempY.Data += parentData[0].TOTLERESULT+";";
  tempX.Data += "X coordinate 1st conrner;"; tempY.Data += "Y coordinate 1st conrner;";
  tempX.Data += parentData[0].XUNIT+";"; tempY.Data += parentData[0].YUNIT+";";
  var rowX = "";var rowY = "";
  for(var i = 0;i<curveData.length;i++){
  rowX = rowX + curveData[i].X_VALUE + ";";
  rowY = rowY + curveData[i].Y_VALUE + ";";
  }
  tempX.Data += rowX; tempY.Data += rowY;
  dataList.push(tempX);
  dataList.push(tempY);
  var data = [];
  for(var m=0;m<dataList.length;m++){
    var tem = {};
    tem.Data = dataList[m].Data;
    data.push(tem);
  }
  for(var i = 0; i < title.length; i++){
  data.push(title[i]);
  }
  var fileName = "csv数据导出_"+GetData();

  JSONToExcelConvertor(title,data,fileName);
}

function JSONToExcelConvertor(title, data, fileName) {
  var CSV = '';
  var row = "";

  for (var i = 0; i < title.length; i++) {
  if(title[i].title){
  row += title[i].title + ',';
  }
  }
  row = row.slice(0, -1);
  CSV += row + '\r\n';

  for (var i = 0; i < data.length; i++) {
  var row = "";
  for (var j = 0; j < title.length; j++) {
    if(title[j].title){
    row += '"' + (data[i][title[j].field] ? data[i][title[j].field] : "") + '"\t,';
    }
  }
  row.slice(0, row.length - 1);
    CSV += row + '\r\n';
  }

  if (CSV == '') {
  alert("Invalid data");
  return;
  }

  var fileName = fileName;
  var uri = new Blob(['\ufeff' + CSV], {type:"text/csv"});
  var link = document.createElement("a");
  link.href = URL.createObjectURL(uri);
  link.style = "visibility:hidden";
  link.download = fileName + ".csv";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function GetData(){
  var day = new Date();
  var Year = 0;
  var Month = 0;
  var Day = 0;
  var CurrentDate = "";
  //初始化时间
  Year= day.getFullYear();
  Month= day.getMonth()+1;
  Day= day.getDate();
  CurrentDate += Year + "/";
  if (Month >= 10 )
  {
    CurrentDate += Month + "/";
  }
  else
  {
    CurrentDate += "0" + Month + "/";
  }
  if (Day >= 10 )
  {
    CurrentDate += Day ;
  }
  else
  {
    CurrentDate += "0" + Day ;
  }
  //时分秒
  var hour = day.getHours();
  var minute = day.getMinutes();
  var second = day.getSeconds();
  CurrentDate =CurrentDate+" "+ (hour<10?("0"+hour):hour)+":";
  CurrentDate = CurrentDate+ (minute<10?("0"+minute):minute)+":";
  CurrentDate = CurrentDate + (second<10?("0"+second):second);
  return CurrentDate ;
}

说明:如果要操作execl单元格样式,免费版的多种js组件都是收费,所以可以通过NPOI操作,接口调用返回url地址实现对execl样式操作下载。

Don't wanna be the other guy,no more...

 

标签:execl,title,Data,js,CurrentDate,length,var,csv,data
来源: https://www.cnblogs.com/UsefulIdiot/p/15852945.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有