vue導出Excel表

使用vue導出表格數據至Excel表格中，自定義導出的excel表格數據

1.安裝，導入

• 先安裝script-loader，xlsx，file-saver；而後將主要的js導出文件加入

npm i script-loader -S
npm i xlsx -S
npm i file-saver -S

• excel所需的js文件

2.自定義數據導出

• 我找到一些文章，可是上面有好可能是直接導出當前已渲染的表格中的數據，並不可以自定義導出全部數據

exportExcel() {
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/excel/Export2Excel');
    /* 設置Excel的表格第一行的標題 */
    const tHeader = ['ID','店鋪名稱','公司'];
    /* filterValue裏的值是tableData裏對象的屬性 */
    const filterValue = ['id','shopname','companyname'];
    
    const list = this.exportList;
    /* 對要導出的數據進行加工，自定義，filterValue中的字段名就是導出到excel中對應的數據鍵值 */
    for(let i = 0; i < list.length; i++) {
        /* 如要導出名字，則自定義name屬性 */
        list[i].name = list[i].lastname + '對的';
    }
    /* 把data裏的list存到list */
    const data = this.formatJson(filterValue, list);
    /* 最後一個項爲導出的excel名字，能夠隨便定義 */
    export_json_to_excel(tHeader, data, '列表');
  });
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
},

• 單獨的設置一個字段來實現導出，這樣纔不會對本來渲染在頁面上的數據形成污染
• 對於須要進行處理後再進行導出的數據，最好應該從新定義一個字段，這樣就不會改變原有的數據，能夠直接導出的數據，就直接將字段放入filterValue數組裏就能夠了

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期推薦：

  • 實現單行及多行文字超出後加省略號
  • 判斷iOS和Android及PC端
  • 使用vue開發移動端管理後臺
  • 畫三角形
  • 微信小程序使用車牌號輸入法