1、安装依赖
npm install --save file-saver //导出文件的库,也可以不安装这个
npm install --save xlsx-style //导出excel后表格的样式需要用到这个库
npm install --save xlsx //声明工作簿,创建文件,塞入数据要用到这个库
2、解决 Can't resolve './cptable' in '...' 的问题,在 vue.config.js 文件中加入该配置
externals: {'./cptable': 'var cptable'
}
3、 xlsx-style设置表格的行高不生效,原因是xlsx-style并没有提供设置行高的方法;xlsx提供了设置表格行高的方法,因此可以采用修改xlsx-style源码的方式解决问题
3.1、找到node_modules/xlsx-style/xlsx.js文件中的write_ws_xml_data
函数,用以下代码替换
var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
function write_ws_xml_data(ws, opts, idx, wb) {var o = [], r = [], range = safe_decode_range(ws['!ref']), cell="", ref, rr = "", cols = [], R=0, C=0, rows = ws['!rows'];var dense = ws["!data"] != null;var params = ({r:rr}), row, height = -1;var date1904 = (((wb||{}).Workbook||{}).WBProps||{}).date1904;for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C);for(R = range.s.r; R <= range.e.r; ++R) {r = [];rr = encode_row(R);for(C = range.s.c; C <= range.e.c; ++C) {ref = cols[C] + rr;var _cell = dense ? (ws["!data"][R]||[])[C]: ws[ref];if(_cell === undefined) continue;if((cell = write_ws_xml_cell(_cell, ref, ws, opts, idx, wb, date1904)) != null) r.push(cell);}if(r.length > 0 || (rows && rows[R])) {params = ({r:rr});if(rows && rows[R]) {row = rows[R];if(row.hidden) params.hidden = 1;height = -1;if(row.hpx) height = px2pt(row.hpx);else if(row.hpt) height = row.hpt;if(height > -1) { params.ht = height; params.customHeight = 1; }if(row.level) { params.outlineLevel = row.level; }}o[o.length] = (writextag('row', r.join(""), params));}}if(rows) for(; R < rows.length; ++R) {if(rows && rows[R]) {params = ({r:R+1});row = rows[R];if(row.hidden) params.hidden = 1;height = -1;if (row.hpx) height = px2pt(row.hpx);else if (row.hpt) height = row.hpt;if (height > -1) { params.ht = height; params.customHeight = 1; }if (row.level) { params.outlineLevel = row.level; }o[o.length] = (writextag('row', "", params));}}return o.join("");
}
3.2、注意:修改源码仅是修改了本地的代码,当再次npm该包时,修改过的源码就会被覆盖,安装使用patch-package
npm i patch-package -D