Vue(Quasar)项目前端Excel导出/导入

安装依赖

FileSaver.js 是客户端保存文件的解决方案。
Xlsx.js 是生成Excel的解决方案。

npm install --save file-saver xlsx

引入

在需要使用的 Vue 页面引入。

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

实际例子

以 json 格式的对象数组导出 Excel 为例，编写如下通用方法：

function exportJson2Excel (data, fileName, sheetName) {
  const sheet = XLSX.utils.json_to_sheet(data)
  FileSaver.saveAs(new Blob([sheet2Blob(sheet, sheetName)], { type: 'application/octet-stream;charset=utf-8' }), fileName)
}

function sheet2Blob (sheet, sheetName) {
  sheetName = sheetName || 'sheet1'
  const workbook = {
    SheetNames: [sheetName],
    Sheets: {}
  }
  workbook.Sheets[sheetName] = sheet
  // 生成excel的配置项
  const wopts = {
    bookType: 'xlsx', // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: 'binary'
  }
  const wbout = XLSX.write(workbook, wopts)
  const blob = new Blob([string2ArrayBuffer(wbout)], { type: 'application/octet-stream' })
  return blob
}

// 字符串转ArrayBuffer
function string2ArrayBuffer (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
}

示例调用代码：

const jsonData = [{ 姓名: 'Tom', 年龄: 18, 身份证号: '0102' }, { 姓名: '张三', 年龄: 210204199901212290, 身份证号: '210204199901212290' }]
exportJson2Excel(jsonData, '示例.xlsx')

同理，一个简单的导入实现方法如下，读取Excel数据并转换成json格式：

function importExcel2Json (file, callback) {
  const reader = new FileReader()
  reader.onload = function (e) {
    const workbook = XLSX.read(e.target.result, { type: 'binary' })
    if (callback) callback(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { defval: '' }))
  }
  reader.readAsBinaryString(file)
}

参考

本例仅使用了 XLSX 中的 json_to_sheet 方法，更多功能可参考官网或相关网站。
Xlsx
https://www.cnblogs.com/liuxianan/p/js-excel.html
https://github.com/SheetJS/sheetjs
https://github.com/DonNicoJs/vue-xlsx
https://www.jianshu.com/p/6b873a26131d
FileSaver
https://blog.csdn.net/qq_30671099/article/details/104052782