vue xlsx 导入导出_前端 vue/react 或者 js 导入/导出 xlsx/xls (带样式)表格的功能

第一种

导出表格的功能:

yarn add xlsx script-loader file-saver xlsx-style

效果展示

xlsx-style的bug修复:node_module/xlsx-style/dist/cpexcel.js的807行的var cpt = require('./cpt' + 'able')改为var cpt = cptable;

上封装的代码:

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

import XLSXfrom 'xlsx-style';

import XLSX2from 'xlsx';

function datenum(v, date1904) {if (date1904) v += 1462;var epoch =Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);

}

function sheet_from_array_of_arrays(data, opts) {var ws ={};var range ={

s: {

c:10000000,

r:10000000},

e: {

c:0,

r:0}

};for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r =R;if (range.s.c > C) range.s.c =C;if (range.e.r < R) range.e.r =R;if (range.e.c < C) range.e.c =C;var cell ={

v: data[R][C]

};if (cell.v == null) continue;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 < 10000000) ws['!ref'] =XLSX.utils.encode_range(range);returnws;

}

function Workbook() {if (!(this instanceof Workbook)) return newWorkbook()