angular8 Vue 匯出excel檔案-有解無憂

angular

package

1、xlsx　　

　　npm install xlsx --save

2、file-saver

　　npm install file-saver --save

　　npm install @types/file-saver --save

3、angular實作匯出多個sheet的資料

exportExcel() {
    import("xlsx").then(xlsx => {
      // const worksheet = xlsx.utils.json_to_sheet(this.getCars());
      console.log(this.BeautifuleValue);
      var all = [
        [],
        [],
        []
      ];
      this.BeautifuleValue.districtBeautifyAdjustedValue.forEach(element => {
        all[0].push(
          {
            '區縣': this.districtName[element.customer],
            '美化系數': element.coefficient,
            '美化值': element.beautifyValue
          }
        );
      });
      this.BeautifuleValue.platBeautifyAdjustedValue.forEach(element => {
        all[1].push(
          {
            '平臺': this.platName[element.plat],
            '美化系數': element.coefficient,
            '美化值': element.beautifyValue
          }
        );
      });
      this.BeautifuleValue.industryBeautifyAdjustedValue.forEach(element => {
        all[2].push(
          {
            '行業': element.industry,
            '美化系數': element.coefficient,
            '美化值': element.beautifyValue
          }
        );
      });
      const oneSheet = xlsx.utils.json_to_sheet(all[0]);
      const twoSheet = xlsx.utils.json_to_sheet(all[1]);
      const threeSheet = xlsx.utils.json_to_sheet(all[2]);
      const workbook = { Sheets: { '區縣': oneSheet, '平臺': twoSheet, '行業': threeSheet }, SheetNames: ['區縣', '平臺', '行業'] };
      const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
      this.saveAsExcelFile(excelBuffer, "美化值");
    });
  }

  saveAsExcelFile(buffer: any, fileName: string): void {
    import("file-saver").then(FileSaver => {
      let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
      let EXCEL_EXTENSION = '.xlsx';
      const data: Blob = new Blob([buffer], {
        type: EXCEL_TYPE
      });
      FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
    });
  }

4、vue匯出

export(){ let exportExcelList = [ { "機構編號": 111111, "機構名稱": 111111, }, { "機構編號": 111111, "機構名稱": 111111, } ]; import("xlsx").then(xlsx => { // const worksheet = xlsx.utils.json_to_sheet(this.getCars()); console.log(this.BeautifuleValue); const oneSheet = xlsx.utils.json_to_sheet(exportExcelList); const workbook = { Sheets: { 組織機構: oneSheet }, SheetNames: ["組織機構"] }; const excelBuffer = xlsx.write(workbook, { bookType: "xlsx", type: "array" }); this.saveAsExcelFile(excelBuffer, "組織機構資料 " + new Date()); }); }, saveAsExcelFile(buffer, fileName) { /** * 匯出資料fun */ import("file-saver").then(FileSaver => { let EXCEL_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"; let EXCEL_EXTENSION = ".xlsx"; const data = new Blob([buffer], { type: EXCEL_TYPE }); FileSaver.saveAs( data, fileName + "_export_" + new Date().getTime() + EXCEL_EXTENSION ); }); }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/163658.html

標籤：JavaScript

上一篇：JS---part5 課程介紹 & part4 復習

下一篇：JS---另一個定時器：一次性的