Realize a exportação de dados de matriz para arquivo Excel (Element-ui, JS)

Exportar tabela ElementUI para o Excel

  • adicionar dependêncianpm install --save xlsx file-saver
// html代码
<el-button @click="exportExcel">点击导出</el-button>
<el-table :data="tableData" style="width: 100%" id="outTable">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
    </el-table>
  • dependências de importação
    import FileSaver from "file-saver";
    import XLSX from "xlsx";";
// js代码
exportExcel() {
    
    
      /* 从表生成工作簿对象 */
      /* outTable是表格的id */
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
    
    
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
    
    
        FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
            new Blob([wbout], {
    
     type: "application/octet-stream" }),
            //设置导出文件名称
            "SystemLog.xlsx"
        );
      } catch (e) {
    
    
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

Envie a string para o arquivo xls percorrendo o json para emenda de string

<html>
<head>
    <button onclick='tableToExcel()'>导出</button>
</head>
<body>
    <script>
    const tableToExcel = () => {
    
    
        // 要导出的json数据
        const jsonData = [
            {
    
    
                id:'01',
                time:'2023-5-12',
                data:'0100'
            },
            {
    
    
                id:'02',
                time:'2023-5-12',
                data:'0100'
            },
            {
    
    
                id:'03',
                time:'2023-5-12',
                data:'0100'
            },
            {
    
    
                id:'04',
                time:'2023-5-12',
                data:'0100'
            },
        ];
        // 列标题,逗号隔开,每一个逗号就是隔开一个单元格
        let str = `ID,时间,数据\n`;
        // 增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
    
    
            for(let item in jsonData[i]){
    
    
            str+=`${
      
      jsonData[i][item] + '\t'},`;  
          }
          str+='\n';
        }
        let uri = 'data:application/vnd.ms-excel;charset=utf-8,\ufeff' + encodeURIComponent(str);
        const link = document.createElement("a");
        link.href = uri;
         // 对下载的文件命名
        link.download =  "系统日志.xls";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    </script>
</body>
</html>

Acho que você gosta

Origin blog.csdn.net/weixin_43883951/article/details/130644516
Recomendado
Clasificación