前端如何利用原生JS导出6w+条数据？-一一网

放在我们前端该如何导出？引入常用的XLSX第三方插件？

XLSX 文件大约500k+ 内含功能比较丰富，我们只是想简简单单的导出一份数据而已。
以我身在的公司开发的电商软件为例，用户有一个需求，要求能导出几个月的订单记录，少则3w+ 多则10w+,这份数据非常庞大。

在JavaScript中数组最大下标为10000，超过容易引起崩溃、卡顿。那如果我的数据有3w条怎么办呢？
那就把一维数组升级为二维数组，在JS中对象类型的数据其实引用的是一个地址。
[[5000],[5000],[5000],[5000],[5000],[5000]]
参考网址 www.huaweicloud.com/articles/b8…

利用原生JS搞定导出：

将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下

// 支持6w+条数据数据导出
  this.th =  `<tr><td>序号</td><td>商品链接(必填)</td><td>商品标题(非必填)</td>
  <td>自定义标题(非必填)</td><td>店铺名称(非必填)</td><td>所属类目(非必填)</td></tr>`,
  let num = 1
  // 数据比较多的情况：二维数组遍历拼接模板
  [[5000],[5000],[5000],[5000],[5000],[5000]].map(item=> {
      item.map(item2 => {
           this.th+= `<tr>
          <td>${num++}</td>
          <td>${item2.goodsLink}</td>
          <td>${item2.goodsTitle}</td>
          <td>${item2.definedTitle}</td>
          <td>${item2.mallName}</td>
          <td>${item2.categoryName}</td>
          </tr>
          `
      })
  })
  // 数据比较少的情况：一维数组遍历拼接模板
    [5000].map(item=> {
       this.th+= `<tr>
      <td>${num++}</td>
      <td>${item.goodsLink}</td>
      <td>${item.goodsTitle}</td>
      <td>${item.definedTitle}</td>
      <td>${item.mallName}</td>
      <td>${item.categoryName}</td>
      </tr>
      `
   })
  // 字段由自己的数据结构决定
importBilling('订单数据', this.th)

// title(非必传) 什么样的数据描述  tplate(必传) 模板
export function importBilling(title = '订单数据', tplate = '') { 
  // Worksheet名
  const worksheet = `${title}${new Date(Date.now() + 8 * 3600 * 1000).toISOString().slice(0, 10)}`
  // 表格模板数据HTML
  const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
            xmlns:x="urn:schemas-microsoft-com:office:excel"
            xmlns="http://www.w3.org/TR/REC-html40">
            <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
              <x:Name>${worksheet}</x:Name>
              <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
              </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
              </head><body><table>${tplate}</table></body></html>`
  // 下载模板
  const blob = new Blob([template], { type: 'html', name: worksheet })
  const a = document.createElement('a')
  document.body.appendChild(a)
  a.href = URL.createObjectURL(blob)
  a.download = `${title}${new Date(Date.now() + 8 * 3600 * 1000).toISOString().slice(0, 10)}.xls`
  // 注意：  a标签有href属性,才可以使用download, hreflang, media, rel, target, type 属性。
  a.click()
  document.body.removeChild(a) // 使用完 移除这个a标签
}
复制代码

代码直接贴出来懵懵的，那我们解析一下其中的API

白话文：获取当前时间的格式化时间

toISOString()
对象Date 原型上的方法  
toISOString() 方法返回一个 ISO（ISO 8601 Extended Format）格式的字符串： YYYY-MM-DDTHH:mm:ss.sssZ。时区总是UTC（协调世界时），加一个后缀“Z”标识。
const event = new Date('05 October 2011 14:48 UTC');
console.log(event.toString());
// expected output: Wed Oct 05 2011 16:48:00 GMT+0200 (CEST)
// (note: your timezone may vary)
console.log(event.toISOString());
// expected output: 2011-10-05T14:48:00.000Z
复制代码

白话文：创建一个blob文件

Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。
var aBlob = new Blob( array, options );
array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变 
示例
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
// Blob {size: 562, type: "html"} 得到的Blob
复制代码

白话文：给要给对象建立一个链接，链接指向这个对象

URL.createObjectURL() 
静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

Note: 此特性在 Web Worker 中可用

注意：此特性在 Service Worker 中不可用，因为它有可能导致内存泄漏。

语法
objectURL = URL.createObjectURL(object);
"blob:https://developer.mozilla.org/f98c9aef-ed65-4a82-a5f3-4c1bf5832dcb"
参数
object
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
返回值
一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端