前端vue-json-excel遇到坑

格子衫前端进阶

已于 2023-02-27 11:17:33 修改

阅读量2.5k

点赞数 1

分类专栏：前端文章标签：前端 vue.js vscode

于 2022-01-26 18:10:05 首次发布

本文链接：https://blog.csdn.net/qq_39691394/article/details/122706028

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

背景

公司开发项目，需要把table导出excel，前端实现

方法
vue-json-excel
main.js

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

具体组件使用

 <download-excel :data="jsonData" :fields=fieldsData" :name="fileName" type="xls" >           
 </download-excel>
   jsonData: 格式 数组
   [{id: 9, name: 'jason'}]
   fieldsData: 对象
   {
    id: 'id'，
    '名称': 'name'
   }
   fileName 不写的话就是就是默认

刚开始使用没有问题，但是后台返回的数据格式需要前端动态计算fieldsData，并且数据量比较大，
就出现问题了，不是导不出数据而是导出的数据会丢失，fieldsData对象里面相近的key在excel丢失了
比如

假如fieldsData这样动态配置
{
 ‘test-a-b’: 'test1'，
 ‘test-a-c’: 'test2'
 ......
}

导致导出文件会导致’‘test-a-c’丢失

修改后方法

首先安装依赖
yarn add xlsx
yarn add file-saver

import XLSX from "xlsx";
import FileSaver from "file-saver";

   <div @click="downloadExcel">
       <span class="iconfont icon-export">导出excel</span>
   </div>
         downloadExcel() {
            const defaultCellStyle = {
                font: { name: "Verdana", sz: 11, color: "FF00FF88" },
                fill: { fgColor: { rgb: "FFFFAA00" } }
            };
            const wopts = {
                bookType: "xlsx",
                bookSST: false,
                type: "binary",
                defaultCellStyle: defaultCellStyle,
                showGridLines: false
            };
            const wb = { SheetNames: ["Sheet1"], Sheets: {}, Props: {} };
            let data = this.dynamicExcelData;
            wb.Sheets["Sheet1"] = XLSX.utils.json_to_sheet(data);

            //创建二进制对象写入转换好的字节流
            let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], {
                type: "application/octet-stream"
            });
            const fileName = '导出文件'
            // 保存文件
            FileSaver.saveAs(tmpDown, `${fileName}.xls`);
        },
        // 字符串转字符流
        s2ab(s) {
            if (typeof ArrayBuffer !== "undefined") {
                let buf = new ArrayBuffer(s.length);
                let view = new Uint8Array(buf);
                for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
                return buf;
            } else {
                let buf = new Array(s.length);
                for (let j = 0; j !== s.length; ++j) buf[j] = s.charCodeAt(j) & 0xff;
                return buf;
            }
        },
        this.dynamicExcelData = [ // 数据格式
          { '时间'： 2021， '地点'： 'beijing', '587 ': 66}
        ]
    假如对象里面有数字作为对象的key时候，记得加个空格， 不让导出的excel在最前面

写在最后导出excel还是后台写接口，导出数据流，这样最方便