1. 程式人生 > 實用技巧 >vue匯出資料excel

vue匯出資料excel

  • 下載兩個依賴
npm install file-save xlsx
  • 建立兩個檔案 Blob.jsExport2Excel.js

    參考地址:檔案地址

  • Export2Excel.js中修改引入地址,注意地址的路徑,沒有script-loader依賴的話就去 npm install script-loader -D下載該依賴

  • 在vue檔案中使用

    引入檔案:

  import {
​    export_json_to_excel
  } from '@/plugins/Export2Excel'

​ 點選按鈕時匯出檔案

<a-button @click="exportExcel">匯出</a-button>
    
exportExcel() {          
    const excelHeader = this.columns.map(item => item.title)
    
    const keys = this.columns.map(item => item.dataIndex)

    const excelData = this.dataSource.map(item => keys.map(i => item[i] || ''))
	const excelName='人員資訊表'
    export_json_to_excel(excelHeader, excelData, excelName)

},
  • 對於export_json_to_excel()中幾個變數的解釋

    excelHeader為匯出資料的表頭
    excelHeader=['年齡','性別','姓名']
    
    excelData為匯出的資料
    excelHeader=[
        {16,'男','tom'},
        {17,'男','jim'}
        {12,'男','jon'}
        {16,'男','king'}
    ]
    //資料的順序與表頭一致
    
    excelName:表的名字