Vue项目中将表格数据导出为excel文件

1.安装XLSX

npm安装

npm install xlsx --save

2.封装工具

在项目的utils文件夹下面新建一个xlsx.js文件，用来存放这个工具函数。

// 下载excel功能
import XLSX from 'xlsx'
/**
 * @param dataList 表格数据内容  array
 * @param fileName 文件标题。必须以 .xlsx结尾
 */
export const downloadXlsx = (dataList, fileName) => {
     
    // dataList =  [[],[]]
   
    const stringToBuff = str => {
     
        var buf = new ArrayBuffer(str.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i !== str.length; ++i) {
     
            view[i] = str.charCodeAt(i) & 0xff
        }
        return buf
    }
    // 创建表格
    let workbook = XLSX.utils.book_new()
    let worksheet = XLSX.utils.aoa_to_sheet(dataList)
    XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1')

    // 创建二进制对象写入转换好的字节流
    let xlsxBlob = new Blob(
        [
            stringToBuff(
                XLSX.write(workbook, {
     
                    bookType: 'xlsx',
                    bookSST: false,
                    type: 'binary'
                })
            )
        ],
        {
      type: '' }
    )

    const a = document.createElement('a')
    // 利用URL.createObjectURL()方法为a元素生成blob URL
    a.href = URL.createObjectURL(xlsxBlob) // 创建对象超链接
    a.download = fileName
    a.click()
}

3.绑定事件

首先需要在需要导出表格的页面中引入这个工具函数。

import {
      downloadXlsx } from "../utils/xlsx";

将触发代码写到onClickExport方法中。

onClickExport() {
     
      let datalist = [];
      datalist.push([
        "Key",
        "传感器名称",
        "传感器类型",
        "协议",
        "预/报警设置",
        "预警阈值",
        "报警阈值",
        "测量时间",
        "最大值",
        "最小值",
        "维度",
        "简介"
      ]);
      //这里的tableData为你的表格数据
      this.tableData.forEach(item => {
     
        datalist.push([
          item.sensorId,
          item.sensorName,
          item.sensorType,
          item.protocol,
          item.activeWay,
          item.warningValue,
          item.alarmingValue,
          item.time,
          item.max,
          item.min,
          item.dimension,
          item.introduction
        ]);
      });
      downloadXlsx(datalist, "传感器数据统计信息.xlsx");
    }

注意:downloadXlsx的第二参数是导出文件的名字(自定义)，这里的名字必须以.xlsx结尾才可以。

到此为止，咱们的文件导出功能就已经实现了。