【xlsx+vue】前端生成可下载的xlsx表格

最新推荐文章于 2023-09-04 19:29:29 发布

longlongfishday

最新推荐文章于 2023-09-04 19:29:29 发布

阅读量345

点赞数

分类专栏： JQ vue 前端文章标签： vue xlsx

本文链接：https://blog.csdn.net/m0_37715455/article/details/117638133

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

组件引入：

  <script type="text/javascript" src="./xlsx.core.min.js"></script>

相关调用：jsonData为后台返回的json数据

        const title = [
          { key: "aaa", text: "字段1" },
          { key: "bbb", text: "字段2" },
          { key: "ccc", text: "字段3" },
        ];
        exportSpecialExcel(title, jsonData);

相关方法：

export const exportSpecialExcel = (title = [], data = [], filename = Date.now()) => {
  const tableData = [];
  // 添加title
  tableData.push(title.map((n) => n.text));

  for (const item of data) {
    const row = [];
    for (const t of title) {
      row.push(item[t.key]);
    }
    tableData.push(row);
  }
  var sheet = XLSX.utils.aoa_to_sheet(tableData);
  openDownloadDialog(sheet2blob(sheet), `${filename}.xlsx`);
}
export const 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:///模式下不会生效
  aLink.click();
}

// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
export const 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",
  });
  return blob;
}

※相关资料找不到了此篇仅为学习记录