1. 程式人生 > >vue實現前端導出excel表格

vue實現前端導出excel表格

turn ret load 表格 nload 創建 col ins lte

1.在src目錄下創建一個文件(vendor)進入Blob.jsExport2Excel.js

2.npm install -S file-saver 用來生成文件的web應用程序

3.npm install -S xlsx 電子表格格式的解析器

4.npm install -D script-loader 將js掛在在全局下

5.寫事件

 1  handleDownload(){
 2           import(‘@/vendor/Export2Excel‘).then(excel => {
 3             const tHeader = [‘timestamp‘, ‘title‘, ‘type‘, ‘importance‘, ‘status‘]//
4 const filterVal = [‘timestamp‘, ‘title‘, ‘type‘, ‘importance‘, ‘status‘]// 5 const data = this.formatJson(filterVal, this.list) 6 excel.export_json_to_excel({ 7 header: tHeader, 8 data, 9 filename: ‘table-list‘ 10 })
11 }) 12 },

6.

1  formatJson(filterVal, jsonData) {
2           return jsonData.map(v => filterVal.map(j => {
3               return v[j]
4           }))
5         }
6 }

vue實現前端導出excel表格