vue+element 使用XLSX实现表格download下载功能

首先安装依赖

import XLSX from "xlsx";

import FileSaver from "file-saver";

html

<el-button
   style="float:right"
   @click="download('模板下载')"
   type="primary"
   class="upload-demo"
   icon="el-icon-plus"
   >模板下载
 </el-button>

js download(){ let that = this;

       
　　download(){
    　　 let that = this;
 　　　　var wb = XLSX.utils.book_new();
        var ws = XLSX.utils.json_to_sheet(
          [
            { A: "S", B: "h", C: "e", D: "e", E: "t", F: "J", G: "S"},
            { A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7},
            { A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
          ],
          {
            header: [ "name", "address", "code","contacts", "phone", "organizationId","hallId",],
            skipHeader: true
          }
        );
        var tableArr = [
          {
            name: "名称",
            address: "地址",
            code: "营业厅编码",
            contacts: "联系人",
            phone: "号码",
            organizationId:'所属区',
            hallId: "统一编码",
          }
        ];
        var ws = XLSX.utils.json_to_sheet(tableArr, {
          header: [ "name", "address", "code","contacts", "phone", "organizationId","hallId",],
          skipHeader: true
        });
        XLSX.utils.book_append_sheet(wb, ws, "sheetName");
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "营业厅模板" + ".xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
    },
如果是导出表格数据那就需要调用接口了

js

exportDoc() { //导出文件接口
      let that = this;
      axios.get( 接口地址, {
          params: {
            token: this.page.token
          }
        })
        .then(res => {
          if (res.data.retCode == '200') {
            var wb = XLSX.utils.book_new();
            var ws = XLSX.utils.json_to_sheet(
              [
                { A: "S", B: "h", C: "e", D: "e", E: "t", F: "J", G: "S"},
                { A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7},
                { A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
              ],
              {
                header: ["code","hallId", "name", "address", "contacts", "phone",'createTime'],
                skipHeader: true
              }
            );
            var tableArr = [
              {
                code: "编码",
                hallId: "统一编码",
                name: "名称",
                address: "地址",
                contacts: "联系人",
                phone: "联系电话",
                createTime: '创建时间'
              }
            ];
            res.data.data.forEach(item => {
              tableArr.push({
                code: item.code,
                name: item.name,
                address: item.province_name + item.city_name,
                contacts: item.contacts,
                phone: item.phone,
                createTime: item.createTime
              });
            });
            var ws = XLSX.utils.json_to_sheet(tableArr, {
              header: ["code","hallId", "name", "address", "contacts", "phone", 'createTime'],
              skipHeader: true
            });
            XLSX.utils.book_append_sheet(wb, ws, "sheetName");
            /* get binary string as output */
            var wbout = XLSX.write(wb, {
              bookType: "xlsx",
              bookSST: true,
              type: "array"
            });
            try {
              FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream" }),
                "营业厅" + ".xlsx"
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
          }
        });
    },

vue+element 使用XLSX实现表格download下载功能

推荐阅读