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;
          }
        });
    },