安裝依賴

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

npm install --save file-saver xlsx

引入

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

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

實際例子

以 json 格式的對象數(shù)組導出 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
}

// 字符串轉(zhuǎn)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
}

示例調(diào)用代碼：

const jsonData = [{ 姓名: 'Tom', 年齡: 18, 身份證號: '0102' }, { 姓名: '張三', 年齡: 210204199901212290, 身份證號: '210204199901212290' }]
exportJson2Excel(jsonData, '示例.xlsx')

同理，一個簡單的導入實現(xiàn)方法如下，讀取Excel數(shù)據(jù)并轉(zhuǎn)換成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 方法，更多功能可參考官網(wǎng)或相關網(wǎng)站。
Xlsx
https://www.cnblogs.com/liuxianan/p/js-excel.html
https://github.com/SheetJS/sheetjs
https://github.com/DonNicoJs/vue-xlsx
http://www.itdecent.cn/p/6b873a26131d
FileSaver
https://blog.csdn.net/qq_30671099/article/details/104052782