一直使用的xlsx进行的表格的导出功能,基础功能是满足的。但是作为一个对产品有高级追求的前端,怎么能无视它导出的“朴素”的样式! 先上优化前后效果图,边框背景色,加粗效果是一个专业表格的基础属性
安装xlsx-style。安装是简单的,npm即可,
网上说明也很多,但是如何在自己的前端工程中处理遇到的各种异常问题是重点!! (前端框架使用说明:【angular^6】 + 【ng-zorro-antd^1.8.1】 )
修改1
找到文件cpexcel.js第807行
// \node_modules\xlsx-style\dist\cpexcel.js 路径
var cpt = require(’./cpt’ + ‘able’);
//修改为
var cpt = cptable;
修改2
找到文件xlsx.js 第11766行
// \node_modules\xlsx-style\xlsx.js 路径
function write_zip_type(wb, opts) {
var o = opts||{};
style_builder = new StyleBuilder(opts);
var z = write_zip(wb, o);
switch(o.type) {
case "base64": return z.generate({type:"base64"});
case "binary": return z.generate({type:"string"});
case "buffer": return z.generate({type:"nodebuffer"});
case "file": return _fs.writeFileSync(o.file, z.generate({type:"nodebuffer"}));
default: throw new Error("Unrecognized type " + o.type);
}
}
// 修改为
function write_zip_type(wb, opts) {
var o = opts||{};
style_builder = new StyleBuilder(opts);
var z = write_zip(wb, o);
switch(o.type) {
case "base64": return z.generateAsync({type:"base64"});
case "binary": return z.generateAsync({type:"string"});
case "buffer": return z.generateAsync({type:"nodebuffer"});
case "file": return _fs.writeFileSync(o.file, z.generateAsync({type:"nodebuffer"}));
default: throw new Error("Unrecognized type " + o.type);
}
}