zoukankan      html  css  js  c++  java
  • 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
            );
          });
        }
     




  • 相关阅读:
    [PTA练习] 愿天下有情人都是失散多年的兄妹(25分)
    sql server远程连接非1433端口
    java把double转化为long型
    StringUtils工具类
    JfreeChart折线图
    Log4j配置
    Ibatis,Spring整合(注解方式注入)
    Spring中的autowire属性(转)
    MyBatis3入门样例
    struts2 ibatis Spring系统架构图
  • 原文地址:https://www.cnblogs.com/shuangzikun/p/12028480.html
Copyright © 2011-2022 走看看