月丶
vue,blob.js,export2excel.js将json数据导出到excel表格
2020-4-13 月丶


纯前端方式将json格式数据导出到excel表格。



1、安装依赖



npm install -S file-saver xlsx



npm install -D script-loader








2、添加blob.js,export2excel.js



Blob.js







/* eslint-disable */


/*  Blob.js


 * A Blob implementation.


 * 2014-05-27


 *


 * By Eli Grey, http://eligrey.com


 * By Devin Samarin, https://github.com/eboyjr


 * License: X11/MIT


 *   See LICENSE.md


 */




/*global self, unescape */


/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,


 plusplus: true */




/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */




(function (view) {


    "use strict";


  


    view.URL = view.URL || view.webkitURL;


  


    if (view.Blob && view.URL) {


        try {


            new Blob;


            return;


        } catch (e) {}


    }


  


    // Internally we use a BlobBuilder implementation to base Blob off of


    // in order to support older browsers that only have BlobBuilder


    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {


            var


                get_class = function(object) {


                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];


                }


                , FakeBlobBuilder = function BlobBuilder() {


                    this.data = [];


                }


                , FakeBlob = function Blob(datatypeencoding) {


                    this.data = data;


                    this.size = data.length;


                    this.type = type;


                    this.encoding = encoding;


                }


                , FBB_proto = FakeBlobBuilder.prototype


                , FB_proto = FakeBlob.prototype


                , FileReaderSync = view.FileReaderSync


                , FileException = function(type) {


                    this.code = this[this.name = type];


                }


                , file_ex_codes = (


                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "


                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"


                ).split(" ")


                , file_ex_code = file_ex_codes.length


                , real_URL = view.URL || view.webkitURL || view


                , real_create_object_URL = real_URL.createObjectURL


                , real_revoke_object_URL = real_URL.revokeObjectURL


                , URL = real_URL


                , btoa = view.btoa


                , atob = view.atob


  


                , ArrayBuffer = view.ArrayBuffer


                , Uint8Array = view.Uint8Array


                ;


            FakeBlob.fake = FB_proto.fake = true;


            while (file_ex_code--) {


                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;


            }


            if (!real_URL.createObjectURL) {


                URL = view.URL = {};


            }


            URL.createObjectURL = function(blob) {


                var


                    type = blob.type


                    , data_URI_header


                    ;


                if (type === null) {


                    type = "application/octet-stream";


                }


                if (blob instanceof FakeBlob) {


                    data_URI_header = "data:" + type;


                    if (blob.encoding === "base64") {


                        return data_URI_header + ";base64," + blob.data;


                    } else if (blob.encoding === "URI") {


                        return data_URI_header + "," + decodeURIComponent(blob.data);


                    } if (btoa) {


                        return data_URI_header + ";base64," + btoa(blob.data);


                    } else {


                        return data_URI_header + "," + encodeURIComponent(blob.data);


                    }


                } else if (real_create_object_URL) {


                    return real_create_object_URL.call(real_URLblob);


                }


            };


            URL.revokeObjectURL = function(object_URL) {


                if (object_URL.substring(05) !== "data:" && real_revoke_object_URL) {


                    real_revoke_object_URL.call(real_URLobject_URL);


                }


            };


            FBB_proto.append = function(data/*, endings*/) {


                var bb = this.data;


                // decode data to a binary string


                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {


                    var


                        str = ""


                        , buf = new Uint8Array(data)


                        , i = 0


                        , buf_len = buf.length


                        ;


                    for (; i < buf_leni++) {


                        str += String.fromCharCode(buf[i]);


                    }


                    bb.push(str);


                } else if (get_class(data) === "Blob" || get_class(data) === "File") {


                    if (FileReaderSync) {


                        var fr = new FileReaderSync;


                        bb.push(fr.readAsBinaryString(data));


                    } else {


                        // async FileReader won't work as BlobBuilder is sync


                        throw new FileException("NOT_READABLE_ERR");


                    }


                } else if (data instanceof FakeBlob) {


                    if (data.encoding === "base64" && atob) {


                        bb.push(atob(data.data));


                    } else if (data.encoding === "URI") {


                        bb.push(decodeURIComponent(data.data));


                    } else if (data.encoding === "raw") {


                        bb.push(data.data);


                    }


                } else {


                    if (typeof data !== "string") {


                        data += ""// convert unsupported types to strings


                    }


                    // decode UTF-16 to binary string


                    bb.push(unescape(encodeURIComponent(data)));


                }


            };


            FBB_proto.getBlob = function(type) {


                if (!arguments.length) {


                    type = null;


                }


                return new FakeBlob(this.data.join(""), type"raw");


            };


            FBB_proto.toString = function() {


                return "[object BlobBuilder]";


            };


            FB_proto.slice = function(startendtype) {


                var args = arguments.length;


                if (args < 3) {


                    type = null;


                }


                return new FakeBlob(


                    this.data.slice(startargs > 1 ? end : this.data.length)


                    , type


                    , this.encoding


                );


            };


            FB_proto.toString = function() {


                return "[object Blob]";


            };


            FB_proto.close = function() {


                this.size = this.data.length = 0;


            };


            return FakeBlobBuilder;


        }(view));


  


    view.Blob = function Blob(blobPartsoptions) {


        var type = options ? (options.type || "") : "";


        var builder = new BlobBuilder();


        if (blobParts) {


            for (var i = 0len = blobParts.lengthi < leni++) {


                builder.append(blobParts[i]);


            }


        }


        return builder.getBlob(type);


    };


  }(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));







Export2Excel.js






此处js是修改过的,可在同个文件创建多个sheet,需要原文件请自行百度。注意:export2excel.js文件中引入blob.js文件的路径,要按自己存放位置填写







//Export2Excel.js


/* eslint-disable */


require('script-loader!file-saver');


require('./blob');//转二进制用  这边要写你的blob的实际地址


require('script-loader!xlsx/dist/xlsx.core.min');




function generateArray(table) {


  var out = [];


  var rows = table.querySelectorAll('tr');


  var ranges = [];


  for (var R = 0R < rows.length; ++R) {


    var outRow = [];


    var row = rows[R];


    var columns = row.querySelectorAll('td');


    for (var C = 0C < columns.length; ++C) {


      var cell = columns[C];


      var colspan = cell.getAttribute('colspan');


      var rowspan = cell.getAttribute('rowspan');


      var cellValue = cell.innerText;


      if (cellValue !== "" && cellValue == +cellValuecellValue = +cellValue;




      //Skip ranges


      ranges.forEach(function(range) {


        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {


          for (var i = 0i <= range.e.c - range.s.c; ++ioutRow.push(null);


        }


      });




      //Handle Row Span


      if (rowspan || colspan) {


        rowspan = rowspan || 1;


        colspan = colspan || 1;


        ranges.push({


          s: {


            r: R,


            c: outRow.length


          },


          e: {


            r: R + rowspan - 1,


            c: outRow.length + colspan - 1


          }


        });


      };




      //Handle Value


      outRow.push(cellValue !== "" ? cellValue : null);




      //Handle Colspan


      if (colspan)


        for (var k = 0k < colspan - 1; ++koutRow.push(null);


    }


    out.push(outRow);


  }


  return [outranges];


};




function datenum(vdate1904) {


  if (date1904v += 1462;


  var epoch = Date.parse(v);


  return (epoch - new Date(Date.UTC(18991130))) / (24 * 60 * 60 * 1000);


}




function sheet_from_array_of_arrays(dataopts) {


  var ws = {};


  var range = {


    s: {


      c: 10000000,


      r: 10000000


    },


    e: {


      c: 0,


      r: 0


    }


  };


  for (var R = 0R != data.length; ++R) {


    for (var C = 0C != data[R].length; ++C) {


      if (range.s.r > Rrange.s.r = R;


      if (range.s.c > Crange.s.c = C;


      if (range.e.r < Rrange.e.r = R;


      if (range.e.c < Crange.e.c = C;


      var cell = {


        v: data[R][C]


      };


      if (cell.v == nullcontinue;


      var cell_ref = XLSX.utils.encode_cell({


        c: C,


        r: R


      });




      if (typeof cell.v === 'number'cell.t = 'n';


      else if (typeof cell.v === 'boolean'cell.t = 'b';


      else if (cell.v instanceof Date) {


        cell.t = 'n';


        cell.z = XLSX.SSF._table[14];


        cell.v = datenum(cell.v);


      } else cell.t = 's';




      ws[cell_ref] = cell;


    }


  }


  if (range.s.c < 10000000ws['!ref'] = XLSX.utils.encode_range(range);


  return ws;


}




function Workbook() {


  if (!(this instanceof Workbook)) return new Workbook();


  this.SheetNames = [];


  this.Sheets = {};


}




function s2ab(s) {


  var buf = new ArrayBuffer(s.length);


  var view = new Uint8Array(buf);


  for (var i = 0i != s.length; ++iview[i] = s.charCodeAt(i) & 0xFF;


  return buf;


}




export function export_table_to_excel(id) {


  var theTable = document.getElementById(id);


  console.log('a')


  var oo = generateArray(theTable);


  var ranges = oo[1];




  /* original data */


  var data = oo[0];


  var ws_name = "SheetJS";


  console.log(data);




  var wb = new Workbook(),


    ws = sheet_from_array_of_arrays(data);




  /* add ranges to worksheet */


  // ws['!cols'] = ['apple', 'banan'];


  ws['!merges'] = ranges;




  /* add worksheet to workbook */


  wb.SheetNames.push(ws_name);


  wb.Sheets[ws_name] = ws;




  var wbout = XLSX.write(wb, {


    bookType: 'xlsx',


    bookSST: false,


    type: 'binary'


  });




  saveAs(new Blob([s2ab(wbout)], {


    type: "application/octet-stream"


  }), "test.xlsx")


}




function formatJson(jsonData) {


  console.log(jsonData)


}




//此处函数已修改,可导出多个sheet


export function export_json_to_excel(data,jsonDatadefaultTitle) {




  /* original data */


  var wb = new Workbook(),


  ws = [];




  var thArr = []


  var ws_nameArr = []




  data.map(item=>{


      thArr.push(item.tHeader)


      ws_nameArr.push(item.sheetName)


  })




  for(let i=0i<jsonData.length;i++){


        jsonData[i].unshift(thArr[i])


        ws.push(sheet_from_array_of_arrays(jsonData[i]))


  }




for (var k = 0k < jsonData.lengthk++) {


    wb.SheetNames.push(ws_nameArr[k])


    wb.Sheets[ws_nameArr[k]] = ws[k]


}




  var wbout = XLSX.write(wb, {


    bookType: 'xlsx',


    bookSST: false,


    type: 'binary'


  });


  var title = defaultTitle || '列表'


  saveAs(new Blob([s2ab(wbout)], {


    type: "application/octet-stream"


  }), title + ".xlsx")


};












3、封装api








/**


 * json导出excel


 * @param {导出的头,数据,表名} exportData 


 * @param {导出的文件名称} filename 


 */


export function json2excel(exportData,filename) {


  require.ensure([], () => {


    const { export_json_to_excel } = require('./export2exel');//注意这个Export2Excel路径


    // const tHeader = header;   // ['部门名称', '维修数量', '维修占比']  设置Excel的表格第一行的标题


    // const filterVal = key; // ['departmentName', 'departmentNameCount', 'Proportion'] 是tableData里对象的属性key值


    // const list = exportData;  //把要导出的数据tableData存到list


    const data = formatJson(exportData);


    export_json_to_excel(exportData ,datafilename+new Date().getTime());//最后一个是表名字


  })


}




function formatJson(exportData) {


  let dataArr = [];


  exportData.map(item=>{


    let listItem =[];


    listItem = item.jsonData.map(v => item.filterVal.map(j => v[j]))


    dataArr.push(listItem)


  })


  return dataArr


}







4、使用方式







import { json2excel } from "@/api/export";







let exportData = [


      {


        tHeader: brandHeader,


        filterVal: key,


        jsonData: this.brandTableData,


        sheetName: '品牌维修记录'


      },


      {


        tHeader: dtHeader,


        filterVal: dtkey,


        jsonData: this.departmentTableData,


        sheetName: '部门维修记录'


      },


      {


        tHeader: mfHeader,


        filterVal: key,


        jsonData: this.ManufacturerTableData,


        sheetName: '厂家维修记录'


      }


    ];




    json2excel(exportData,"维修统计");







tHeader: 表格第一行名称  ['品牌名称', '维修数量', '维修占比'],



filterVal: 名称对应字段名  ['name', 'count', 'per'],



jsonData: 要导出的json数据  



[{"name":"惠普","per":50.00000,"count":1},{"name":"联想","per":50.00000,"count":1}],




sheetName:导出后文件的sheet名称







附导出结果。



导出样式确实不好看,但至少看看数据没啥问题。

发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容