升级导出表格之xlsx-style

519 阅读1分钟

一直使用的xlsx进行的表格的导出功能,基础功能是满足的。但是作为一个对产品有高级追求的前端,怎么能无视它导出的“朴素”的样式! 先上优化前后效果图,边框背景色,加粗效果是一个专业表格的基础属性

image.png 安装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); 
    } 
}