這幾天做了一個(gè)頁面，是一個(gè)表格，要求點(diǎn)擊按鈕把表格內(nèi)容導(dǎo)出，第一次使用了插件vue-json-excel。

    首先，我們先使用以下下載依賴。

  npm install vue-json-excel -S

    然后，在main.js里使用以下來應(yīng)用依賴。

  import JsonExcel from 'vue-json-excel'
 Vue.component('downloadExcel', JsonExcel)

    使用時(shí)，使用<download-excel>包裹下載按鈕，

    以下幾個(gè)比較重要的參數(shù)需要配置

    1. data：需要導(dǎo)出的數(shù)據(jù)，這個(gè)內(nèi)容和表格內(nèi)容一樣，是一個(gè)數(shù)組。

    2. Fields：需要導(dǎo)出的頭部標(biāo)題和內(nèi)容，如果不配置，默認(rèn)會(huì)全部導(dǎo)出。

    3. Name：導(dǎo)出文件的名稱。

    4. Header：表格的總標(biāo)題。

    這是json_fields的配置方式

    結(jié)果，服務(wù)器沒有外網(wǎng)，下不了插件，所以只能用原生js。

    這里我們只需要一個(gè)點(diǎn)擊事件@click，首先，保證我們表格的數(shù)據(jù)格式為[{},{},{}]，

    然后循環(huán)該數(shù)組，\t意為下一個(gè)列內(nèi)容，\n意為下一行內(nèi)容，然后規(guī)定數(shù)據(jù)格式和編碼格式，用encodeURIComponent解決亂碼，最后用data：把代碼內(nèi)容變成鏈接。

    然創(chuàng)建一個(gè)a標(biāo)簽，規(guī)定下載鏈接和下載文件名，最后點(diǎn)擊這個(gè)a鏈接就能下載excel表格了。

    這里表格還應(yīng)用了高度自適應(yīng)，詳情可以看一下這里。