Vue外掛之匯出EXCEl
阿新 • • 發佈:2018-11-25
本週專案需要實現匯出列表資料的功能,在githup上找到了一個比較好用的外掛~
簡單的整理一下,希望對各位有所幫助。
使用方法:
1.npm安裝依賴
npm install vue-json-excel
2.專案主檔案入口main.js全域性引入
import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonExcel)
3.直接在專案中使用
<download-excel :data="exportData" :fields="json_fields"name="filename.xls" > <span>匯出資料</span> </download-excel>
4.元件屬性說明
屬性名 | 型別 | 描述 |
---|---|---|
data | Array | 需要匯出的資料,支援中文 |
fields | Object | 定義需要匯出的資料欄位 |
name | string | 匯出EXCEL的檔名 |
type | string | 匯出EXCLE的檔案型別,兩種格式xls,csv,預設是xls |
fetch | function | 回撥函式。在下載前通過介面獲取資料。只有在沒有data屬性的情況下該屬性才會生效 |
下面來舉幾個栗子
<download-excel class = "btn btn-default" :data = "json_data" :fields = "json_fields" name = "filename.xls"> Download Excel (可以自定義自己想要的html) </download-excel>
const app = new Vue({ el:'#app', data: { //列出自己需要匯出的欄位 json_fields: { //生成excel的欄位:匯出資料的欄位 'Complete name': 'name', 'City': 'city', 'Telephone': 'phone.mobile', 'Telephone 2' : { field: 'phone.landline', callback: (value) => { return `Landline Phone - ${value}`; } }, }, //匯出的資料 json_data: [ { 'name': 'Tony Peña', 'city': 'New York', 'country': 'United States', 'birthdate': '1978-03-15', 'phone': { 'mobile': '1-541-754-3010', 'landline': '(541) 754-3010' } }, { 'name': 'Thessaloniki', 'city': 'Athens', 'country': 'Greece', 'birthdate': '1987-11-23', 'phone': { 'mobile': '+1 855 275 5071', 'landline': '(2741) 2621-244' } } ] } })
json_fields的回撥函式有3種寫法
寫法一:
json_fields: { 'Complete name': 'name', 'City': 'city', 'Telephone': 'phone.mobile', 'Telephone 2' : { //帶field:從該條資料中選擇一個欄位最深處的資料 field: 'phone.landline', //value就是這個欄位值代表最深處的資料 callback: (value) => { return `Landline Phone - ${value}`; } }, },
寫法二:
json_fields: { 'Complete name': 'name', 'City': 'city', 'Telephone': 'phone.mobile', 'Telephone 2' : { //帶field:從該條資料中選擇一個欄位 field: 'phone', //value就是這個欄位值 callback: (value) => { return `Landline Phone - ${value.landline}`; } }, },
寫法三:
json_fields: { 'Complete name': 'name', 'City': 'city', 'Telephone': 'phone.mobile', 'Telephone 2' : { //沒有field:value代表整條資料 callback: (value) => { return `Landline Phone - ${value.phone.landline}`; } }, },