Vue+element UI實現表格數據導出Excel組件

介紹

這是一個可以將頁面中的表格數據導出為Excel文件的功能組件，該組件一般與表格一起使用，將表格數據傳給組件，然后通過點擊組件按鈕可將表格中的數據導出成Excel文件。

使用方法

由於封裝該組件內部引用了xlsx.js，file-saver.js和elementUI，因此在使用該組件時，請先安裝如下依賴：

npm install xlsx file-saver element-ui --save

安裝好依賴后，只需將該組件文件夾ExportExcel導入到現有項目中即可使用。

使用示例

<template>
  <div id="app">
    <export-excel v-if="list !== null" :list="list" :tHeader="tHeader" :tValue="tValue"></export-excel>
  </div>
</template>

<script>
import  ExportExcel from './ExportExcel'
export default {
  name: 'app',
  components: { ExportExcel},
  data() {
    return {
      list:null,
      tHeader:['Id', '告警類型', '告警內容', '告警時間（段）', '告警次數'],
	  tValue:['id', 'type', 'content', 'time', 'count'],
    }
  }
}
</script>

選項

屬性	描述	類型	是否必須
list	由后端返回的表格數據	Array	是
tHeader	導出的Excel文件表頭標題	Array	是
tValue	要將表格數據中的哪些字段作為數據導出至Excel，與表頭一一對應	Array	是
filename	導出的Excel文件名，默認為“導出數據.xlsx”	String	否

選項說明

關於選項中的tHeader和tValue說明如下：

例如將如下表格數據導出成Exlcel：

其中表頭數據為：

所以tHeader為：

tHeader:['Id', '告警類型', '告警內容', '告警時間（段）', '告警次數']

后端返回的表格數據list為：

[
    {
        "id":1,
        "type":"",
        "content":"",
        "time":"",
        "count":"",
    },
    {
        "id":2,
        "type":"",
        "content":"",
        "time":"",
        "count":"",
    },
    //....
]

其中：

• list中的id------->表頭的ID
• list中的type------->表頭的'告警類型'
• list中的content------->表頭的'告警內容'
• list中的time------->表頭的'告警時間（段）'
• list中的count------->表頭的'告警次數'

所以tValue為：

tValue:['id', 'type', 'content', 'time', 'count']

效果圖

組件代碼

完整代碼請戳☞Vue-Components-Library/ExportExcel

（完）