首頁手記 js將element的table表導出為excel

js將element的table表導出為excel

標簽：

Html5 JavaScript Vue.js

直接上代码

<el-table
   :data="item.data"
   cell-class-name="itemTd"
   row-class-name="itemRow"
   style="width: 100%"
>
   <el-table-column prop="name" :label='"sku名称" + "(" + item.name + ")"'></el-table-column>
   <el-table-column prop="sales" label="必笔数" width="150"></el-table-column>
   <el-table-column prop="value" width="150" label="笔数占比（%）"></el-table-column>
</el-table>

<a id="downland">导出全部</a>

只要左边的表格就行了

因为vue渲染dom需要一定的时间所以不能直接定义先下载的表格因为获取不到table标签，所以我将js的操作放到了setTimeout中
element的表格中表头和表单是分开的所以还需要对表单数据进行拼接。

setTimeout(function() {
  let str = null
  for(let i = 0;i < document.getElementsByTagName("table").length;i++) {
     str = str + document.getElementsByTagName("table")[i].outerHTML
  }
  var html = "<html><head><meta charset='utf-8' /></head><body>" + str + "</body></html>";
  // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
  var blob = new Blob([html], { type: "application/vnd.ms-excel" });
  var a = document.getElementById("downland");
  // 利用URL.createObjectURL()方法为a元素生成blob URL
  a.href = URL.createObjectURL(blob);
  // 设置文件名
  a.download = "商品sku统计.xls";
},50)

成果：