這幾天做了一個頁面，是一個表格，要求點擊按鈕把表格內容導出，第一次使用了插件vue-json-excel。
首先，我們先使用以下下載依賴。
npm install vue-json-excel -S
然后，在main.js里使用以下來應用依賴。
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)使用時，使用<download-excel>包裹下載按鈕，
以下幾個比較重要的參數需要配置
1. data：需要導出的數據，這個內容和表格內容一樣，是一個數組。
2. Fields：需要導出的頭部標題和內容，如果不配置，默認會全部導出。
3. Name：導出文件的名稱。
4. Header：表格的總標題。
這是json_fields的配置方式
結果，服務器沒有外網，下不了插件，所以只能用原生js。
這里我們只需要一個點擊事件@click，首先，保證我們表格的數據格式為[{},{},{}]，
然后循環該數組，\t意為下一個列內容，\n意為下一行內容，然后規定數據格式和編碼格式，用encodeURIComponent解決亂碼，最后用data：把代碼內容變成鏈接。
然創建一個a標簽，規定下載鏈接和下載文件名，最后點擊這個a鏈接就能下載excel表格了。
這里表格還應用了高度自適應，詳情可以看一下這里。
上一篇： vue使用base64加密密碼
下一篇： 利用用戶代碼片段快速生成vue3模板
