vue + element-ui 纯前端导出excel---（多表头&& 带有样式 ）

第一种方式：
1.安装插件--
  npm install -S file-saver xlsx
  npm install -S xlsx
  npm install -D script-loader
  cnpm install --save xlsx-style  --样式
2.创建excel文件夹---创建Bolb.js 、Export2Excel.js
3.在全局中引入---main.js
  import Blob from '../src/excel/Blob.js'
  import Export2Excel from '../src/excel/Export2Excel.js'

  注释：Blob.js  Export2Excel.js这2个文件根据自己存放路径去加载
4.build-->webpack.base.conf.js
   'excel': path.resolve(__dirname, '../src/excel'),//新增加一属性
5.excel导出--HelloWorld.vue文件(核心方法)

            export2Excel() {
                var _this = this;
                require.ensure([], () => {
                    const {
                        export_json_to_excel
                    } = require('../../src/excel/Export2Excel'); //这里必须使用绝对路径
                    const tHeader = ['序号', '物料编码', '物料名称', '参数/规格', '品牌', '数量', '备损量', '名称', '参数/规格', '品牌', '单价', '小计', '状态']; // 导出的表头名
                    const filterVal = ['changeType', 'code', 'name', 'material_specification', 'brand', 'dosage', 'equipment_damage', 'product_id', 'math_specification', 'brand', 'price', 'subtotal', 'match_state']; // 导出的表头字段名
                    let number = 0,
                        newArrayList = [];
                    const list = newArrayList;
                    _this.excelData.map((item, index) => {
                        newArrayList.push(Object.assign({}, item, {
                            changeType: number++
                        }))
                    });
                    newArrayList.splice(newArrayList.findIndex(item => item.changeType === 0), 1);
                    const data = _this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, `导出excel`, ); // 导出的表格名称，根据需要自己命名
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }

6.增加多表头

    data.unshift(['需求物料', '', '', '', '', '', '', '物料报价', '', '', '', '', '']);
    data.unshift(['moq总金额：', '', '222', '', '', '', '', '报价单总金额：', '2525', '人民币', '', '', '', ]);
    data.unshift(['单件成品小计：', '', '222', '', '', '', '', '总金额(不包含moq)：', '52512', '人民币', '', '', '', ]);
    data.unshift(['成品参数/规格：', '', '多發發對方2', '', '', '', '', '成品数量：', '625', '', '', '', '', ]);
    data.unshift(['成品名称：', '', '黎明', '', '', '', '', '成品编码：', '123', '', '', '', '', ]);
    data.unshift(['原文件名：', '', '大事发生的', '', '', '', '', '', '', '', '', '', '', ]);
    data.unshift(['报价表格', '', '', '', '', '', '', '', '', '', '', '', '']);
    data.push(['要求说明：', '', '', '', '', '', '', '报价日期', '2020-4-1 10:27:54', 'xxxxxxxx', '', '', '']);

7.合并单元格 ----参考   https://www.npmjs.com/package/xlsx-style

    使用 ：ws["!merges"]

    { //合并标题
            s: { //s为开始
                c: 0, //开始列
                r: 0 //开始取值范围
            },
            e: { //e结束
                c: 12, //结束列
                r: 0 //结束范围
      }

8.样式给定

    var B5_B6_I5_I6_J5_J6 = {
        font: {
            sz: 13,
            //        bold: true,  加粗
            color: {
                rgb: "FF0000"
            }
        },
        alignment: {
            horizontal: "left",
            vertical: "left"
        },
        border: border_All
    };

ws["C5"].s = B5_B6_I5_I6_J5_J6;

9.文件样式没生效--并且报错
import XLSX from "xlsx-style"报错：This relative module was not found: ./cptable in ./node_modules/[email protected]@xlsx-style/dist/cpexcel.js

 注释：解决方法--在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;

 

运行结果：

 

总结：活到老，学到老！