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

        );

      });

    }