实现导出数组数据到Excel文件（Element-ui，JS）

NIshihara

已于 2023-07-18 10:22:37 修改

阅读量670

点赞数

文章标签： javascript excel 前端 elementui

于 2023-05-12 16:20:06 首次发布

本文链接：https://blog.csdn.net/weixin_43883951/article/details/130644516

版权

ElementUI表格导出到Excel

加入依赖 npm 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>

导入依赖项
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;
    },

通过将json遍历进行字符串拼接，将字符串输出到xls文件

<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>