vue2前端导出带背景色表格 xlsx xlsx-style

Posted 2023-03-18 HelloLLLLL

vue2前端导出

vue2 +elmentui+xlsx10.0.0+xlsx-style

坑有点多。

xlsx10.0.0以后的版本 用require导入或者使用什么导入什么，不要import * xlsx全部导入 ,不然jszip组件报错找不到。

配置文件：

const  defineConfig  = require(\'@vue/cli-service\')
module.exports = defineConfig(
  transpileDependencies: true,
   configureWebpack: resolve:
    fallback: 
      fs: false,
    ,
    
  ,
   externals:
              \'./cptable\': \'var cptable\'
        ,
  
)

改xlsx-style源码：

参考

https://blog.csdn.net/m0_66970189/article/details/126886508

js代码：

<script>
    // @ is an alias to /src
    import  utils  from \'xlsx\';
    import XLSXS from "xlsx-style";
    import FileSaver from "file-saver";
    export default
    
        name: \'HomeView\',
        data()
        
            return 
                tableList: [
                
                    date: \'2016-05-02\',
                    name: \'王小虎\',
                    address: \'上海市普陀区金沙江路 1518 弄\',
                    id: 0,
                ,
                
                    date: \'2016-05-04\',
                    name: \'王小虎\',
                    address: \'上海市普陀区金沙江路 1517 弄\',
                    id: 1,
                ,
                
                    date: \'2017-05-01\',
                    name: \'王小虎\',
                    id: 2,
                    address: \'上海市普陀区金沙江路 1511111 弄\'
                ,
                
                    date: \'2016-05-03\',
                    name: \'王小虎\',
                    address: \'上海市普陀区金沙江路 1516 弄\',
                    id: 3
                , ]
            
        ,
        methods:
        
            s2ab(s)
            
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            ,

            print()
            

                let wb = utils.table_to_book(document.querySelector("#table1"),  sheet: "分组表" );

                this.setExlStyle(wb["Sheets"]["分组表"]);
                this.setbgColor(wb["Sheets"]["分组表"]);
                console.log(wb);
                var ws = XLSXS.write(wb,
                
                    type: "binary",//node.js6以上，写buffer会报nodeBuffer不支持
                );
                try
                
                    FileSaver.saveAs(
                        new Blob([this.s2ab(ws)],  type: "application/octet-stream" ),
                        \'5.xlsx\'
                    );
                
                catch (e)
                
                    if (typeof console !== "undefined")
                        console.log(e, ws);
                
                return ws;
            ,
            setExlStyle(data)
            
                let borderAll = 
                    //单元格外侧框线
                    top:
                    
                        style: "thin",
                    ,
                    bottom:
                    
                        style: "thin",
                    ,
                    left:
                    
                        style: "thin",
                    ,
                    right:
                    
                        style: "thin",
                    ,
                ;
                data["!cols"] = [];
                for (let key in data)
                
                    if (data[key] instanceof Object)
                    
                        data[key].s = 
                            border: borderAll,
                            alignment:
                            
                                horizontal: "center", //水平居中对齐
                                vertical: "center",
                            ,
                            font:
                            
                                sz: 11,
                            ,
                            bold: true,
                            numFmt: 0,

                        ;

                        data["!cols"].push( wpx: 115 );
                    
                
                return data;
            ,
            //根据条件改变背景
            setbgColor(ws)
            

                let borderAll = 
                    //单元格外侧框线
                    top:
                    
                        style: "thin",
                    ,
                    bottom:
                    
                        style: "thin",
                    ,
                    left:
                    
                        style: "thin",
                    ,
                    right:
                    
                        style: "thin",
                    ,
                ;
                let arr = ["A", "B", "C", "D"];
                for (let i = 1; i <= this.tableList.length; i++)
                
                    for (let key in arr)
                    
                        var key1 = \'A\' + i;
                        var key2 = arr[key] + i;


                        var val = ws[key1];
                        if (val.v % 2 == 0)
                        
                            ws[key2].s = 
                                border: borderAll,
                                alignment:
                                
                                    horizontal: "center", //水平居中对齐
                                    vertical: "center",
                                ,

                                bold: true,
                                numFmt: 0,
                                font:
                                
                                    name: \'Arial\',
                                    sz: 10,
                                    bold: true,
                                    color:  rgb: "FFFFFFFF" 
                                ,
                                fill:
                                
                                    //背景色
                                    bgColor:  rgb: "FF59AB44" ,
                                    fgColor:  rgb: "FF59AB44" ,
                                ,
                            
                        
                    
                
                return ws;
            
        

工程：vue2export.zip