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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

第一种方式：

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;

运行结果：

总结：活到老，学到老！

以上是 vue + element-ui 纯前端导出excel---（多表头&& 带有样式 ） 的全部内容， 来源链接： utcz.com/z/375932.html

回到顶部