• vue JSON数据导出为 多个sheet表的excel文件


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
      </head>
      <body>
        <script>
          // 数据
          let data = { '基本信息': [{name: '李四', sex: 'nan', age: 12}], '成绩': [{class: '计算机', teacher: 'Mrs wang', score: 90}] };
          let columnHeaders = { '基本信息': ['name', 'sex', 'age'], '成绩': ['class', 'teacher', 'score']}
          outputXlsxFile(
            data,
            [{ wch: 50 }, { wch: 50 }, { wch: 10 }],
            "test-xlsx"
          );
    
          function outputXlsxFile(data, wscols, xlsxName) {
            let sheetNames = [];
            let sheetsList = {};
            const wb = XLSX.utils.book_new();
    
            for (let key in data) {
              sheetNames.push(key);
              let columnHeader = columnHeaders[key] // 此处是每个sheet的表头
              let temp = transferData(data[key], columnHeader);
              sheetsList[key] = XLSX.utils.aoa_to_sheet(temp);
              sheetsList[key]["!cols"] = wscols;
            }
    
            wb["SheetNames"] = sheetNames;
            wb["Sheets"] = sheetsList;
    
            XLSX.writeFile(wb, xlsxName + ".xlsx");
          }
    
          function transferData(data, columnHeader) {
            let content = [];
            content.push(columnHeader);
            data.forEach((item, index) => {
              let arr = [];
              columnHeader.map(column =>{
                arr.push(item[column]);
              })
              content.push(arr);
            });
            return content;
          }
        </script>
      </body>
    </html>

     
    注意 上面的引入必须是xlsx.full.min.js
    <script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
     

  • 相关阅读:
    配置日志
    部署项目到jetty
    部署web应用程序到tomcat
    spring boot 整合mybatis
    创建spring boot 项目
    发送http请求
    pom.xml文件中dependency标签的scope子标签
    Ubuntu apparmor何方神圣
    Ubuntu Nginx下配置网站ssl实现https访问
    打造私有的DNS 服务
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/9230182.html
Copyright © 2020-2023  润新知