1. 程式人生 > >vue+iview中的table表格導出excel表格

vue+iview中的table表格導出excel表格

日期 [] 格式 exportcsv 程序 div 文件夾 代碼 名稱

一、iveiw框架中table中有exportCsv()方法可以導出.csv後綴文件,類似於excel文件,但是並不是excel文件。

二、實現table表格導出excel文件利用Blob.js 和 Export2Excel.js兩個文件實現

  1.Blob.js 和 Export2Excel.js文件

    鏈接:https://pan.baidu.com/s/1PvP-NxmONNh71SRDvlL_9A 密碼:3h82

  2.把Blob.js 和 Export2Excel.js文件添加到src文件夾下的assets的文件夾下的js文件夾裏

    在項目下還有有以下操作:

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

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

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

  技術分享圖片

  3.在Export2Excel.js中配置

  技術分享圖片

  這個地址和需要轉換excel文件的頁面的文件位置有關系,我的頁面文件在assets同級文件夾pages下的home文件夾下。

  這個地址是Blob.js相對於導出excel文件頁面的相對位置

  4.代碼

  

 1 handleDownload() {
 2     this.downloadLoading = true;
 3     require.ensure([], () => {
4 const {export_json_to_excel} = require(‘../../assets/js/Export2Excel‘) //這個地址和頁面的位置相關,這個地址是Export2Excel.js相對於頁面的相對位置 5 const tHeader = ["序號", "客戶", "產品型號", "系列號", "銷售日期", "備註"]; //這個是表頭名稱 可以是iveiw表格中表頭屬性的title的數組 6 const filterVal = ["index", "customerName", "machineModel", "seriesNumber", "shipmentTime", "remarks"]; //
與表格數據配合 可以是iview表格中的key的數組 7 const list = [{ 8 "index": "1", 9 "customerName": "你好1", 10 "machineModel": "你好2", 11 "seriesNumber": "你好3", 12 "shipmentTime": "你好4", 13 "remarks": "你好5" 14 }, 15 { 16 "index": "2", 17 "customerName": "hello world 1", 18 "machineModel": "hello world 2", 19 "seriesNumber": "hello world 3", 20 "shipmentTime": "hello world 4", 21 "remarks": "hello world 5" 22 }, 23 ]; //表格數據,iview中表單數據也是這種格式! 24 const data = this.formatJson(filterVal, list) 25 export_json_to_excel(tHeader, data, ‘列表excel‘) //列表excel 這個是導出表單的名稱 26 this.downloadLoading = false 27 }) 28 }, 29 formatJson(filterVal, jsonData) { 30 return jsonData.map(v => filterVal.map(j => v[j])) 31 }

5.看了一些前輩的博客,有些差異,自己摸索能夠導出excel文件。

vue+iview中的table表格導出excel表格