vue导出excel表格功能实现

下载插件 xlsx，file-saver

npm install xlsx

npm install file-saver

创建 js 文件，导入代码进行配置

import XLSX from "xlsx"
import { saveAs } from 'file-saver'

// 将json数据处理为xlsx需要的格式
function datenum(v, date1904) {
    if (date1904) v += 1462
    let epoch = Date.parse(v)
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}

function data2ws(data) {
    const ws = {}
    const range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } }
    for (let R = 0; R != data.length; ++R) {
        for (let C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R
            if (range.s.c > C) range.s.c = C
            if (range.e.r < R) range.e.r = R
            if (range.e.c < C) range.e.c = C
            const cell = { v: data[R][C] }
            if (cell.v == null) continue
            const cell_ref = XLSX.utils.encode_cell({ c: C, r: R })

            if (typeof cell.v === 'number') cell.t = 'n'
            else if (typeof cell.v === 'boolean') cell.t = 'b'
            else if (cell.v instanceof Date) {
                cell.t = 'n'
                cell.z = XLSX.SSF._table[14]
                cell.v = datenum(cell.v)
            }
            else cell.t = 's'

            ws[cell_ref] = cell
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
    return ws
}
// 导出Excel
function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook()
    this.SheetNames = []
    this.Sheets = {}
}

function s2ab(s) {
    const buf = new ArrayBuffer(s.length)
    const view = new Uint8Array(buf)
    for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
    return buf
}

/*
* th => 表头
* data => 数据
* fileName => 文件名
* fileType => 文件类型
* sheetName => sheet页名
*/
export default function toExcel({ th, data, fileName, fileType, sheetName }) {
    data.unshift(th)
    const wb = new Workbook(), ws = data2ws(data)
    sheetName = sheetName || 'sheet1'
    wb.SheetNames.push(sheetName)
    wb.Sheets[sheetName] = ws
    fileType = fileType || 'xlsx'
    var wbout = XLSX.write(wb, { bookType: fileType, bookSST: false, type: 'binary' })
    fileName = fileName || '列表'
    saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${fileName}.${fileType}`)
}

 

vue页面直接引入js文件

import exExcel from '@/utils/exportExcel'

download() {
    const thDataList = ['用户ID', '用户名称'] // 存储表头
    const filterVal = ['id', 'username'] // 存储表单数据
    const dataList = this.tableList // 要导出的数据列表
    const data = dataList.map(v => filterVal.map(k => v[k])) // 这里使用数据筛选
    const [fileName, fileType, sheetName] = ['表名, 'xlsx', '表名'] // 这里的数组中传递三个参数，分别是Excel的文件名称， Excel的文件类型后缀， 第三个参数不会显示，但是必须要存在
    toExcel({ thDataList, data, fileName, fileType, sheetName }) // 最后把数据传递过去
}