关于javascript:前端使用xlsxjs导出excel

新建 js 文件 exportXLSX.js

import XLSX from 'xlsx'

// 将一个 sheet 转成最终的 excel 文件的 blob 对象，而后利用 URL.createObjectURL 下载
function sheet2blob(sheet, sheetName) {
  sheetName = sheetName || 'sheet1';
  var workbook = {SheetNames: [sheetName],
    Sheets: {}};
  workbook.Sheets[sheetName] = sheet;
  // 生成 excel 的配置项
  var wopts = {
    bookType: 'xlsx', // 要生成的文件类型
    bookSST: false, // 是否生成 Shared String Table，官网解释是，如果开启生成速度会降落，但在低版本 IOS 设施上有更好的兼容性
    type: 'binary'
  };
  var wbout = XLSX.write(workbook, wopts);
  var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"});
  // 字符串转 ArrayBuffer
  function s2ab(s) {var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
  return blob;
}

/**
* 通用的关上下载对话框办法，没有测试过具体兼容性
* @param url 下载地址，也能够是一个 blob 对象，必选
* @param saveName 保留文件名，可选
*/
function openDownloadDialog(url, saveName) {if (typeof url == 'object' && url instanceof Blob) {url = URL.createObjectURL(url); // 创立 blob 地址
  }
  var aLink = document.createElement('a');
  aLink.href = url;
  aLink.download = saveName || ''; // HTML5 新增的属性，指定保留文件名，能够不要后缀，留神，file:/// 模式下不会失效
  var event;
  if (window.MouseEvent) event = new MouseEvent('click');
  else {event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  }
  aLink.dispatchEvent(event);
}

/**
 * 
 * @param {Array} json 表格数据
 * @param {String} fileName 文件名
 * @param {Array} headerList 表头名称
 */
export default function exportXLSX(json, fileName, headerList) {
  const header = {header: headerList}
  const sheet = XLSX.utils.json_to_sheet(json, header);
  openDownloadDialog(sheet2blob(sheet), fileName);
}

通过 import exportXLSX from “@/utils/exportXLSX” 引入该 js 文件
调用 exportXLSX 函数传入 json 数组, 文件名, 表头即可导出