vue 導出excel表格


對於涉及到數據比較多的管理后台導出excel 表格這個需求就非常的常見了

  所以?

    vue 怎么到處excel表格的?

    有兩種辦法

    1:請求接口后台直接給你的是excel文件,你需要做的就是怎么接收excel 表格,

    2:就是請求后台接口給你返回的json數據,你需要生成excel表格,然后導出來,

    在這里我講一下第二種辦法

  廢話不說直接教程:

    一:需要安裝依賴:

      npm install -S file-saver xlsx

      npm install -D script-loader

    二:引入兩個js

      Blob.js和 Export2Excel.js。

      可以新建一個文件夾,放進去   

      

      Blob.js和 Export2Excel.js文件:鏈接: http://pan.baidu.com/s/1nvSdw85 密碼: 5qhi

    三:需要兩個方法

      export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../vendor/Export2Excel');    ---require 括號里面是相對路徑其實是引用  Export2Excel.js
        const tHeader = ['序號', 'IMSI', 'MSISDN', '證件號碼', '姓名'];     ----tHeader 數組里面放的是字段的對應名
        const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];   -----filterVal  字段對應的值
        const list = this.tableData;                                                        ----對應的json數組
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

    四:按鈕導出 調用 export2Excel方法

    

    注:如果webpack報解析錯誤:

      在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
      即可解決
      alias是配置別名

 

    還有一個問題:就是

      

    上述有個Export2Excel.js它引用了 Blob.js 所以你要把那個 require( )的路徑改成相對路徑;完了再調用方法就可以了如下圖:

      

   

      注意:不要忘記引用這兩個js,因為你要用人家的控件就要先引入才能用哦!!在入口文件main.js或者在組件里面單獨引用都可以,我是直接在main.js引用的;

      

       參考文獻:http://www.cnblogs.com/Mrfan217/p/6944238.html

      


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM