vue + element + 匯入、匯出excel表格

相關文件： https://blog.csdn.net/qq_37141546/article/details/78852198

匯入、匯出：https://www.cnblogs.com/liguiwang/p/8430672.html

 

匯入表格：

<input type="file" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>

importf(obj) {

        let _this = this;

    let inputDOM = this.$refs.inputer;   // 通過DOM取檔案資料

    this.file = event.currentTarget.files[0];  

    var rABS = false; //是否將檔案讀取為二進位制字串

    var f = this.file;

    var reader = new FileReader();

    //if (!FileReader.prototype.readAsBinaryString) {

    FileReader.prototype.readAsBinaryString = function(f) {

    var binary = "";

    var rABS = false; //是否將檔案讀取為二進位制字串

    var pt = this;

    var wb; //讀取完成的資料

    var outdata;

    var reader = new FileReader();

    reader.onload = function(e) {

        var bytes = new Uint8Array(reader.result);

        var length = bytes.byteLength;

        for(var i = 0; i < length; i++) {

             binary += String.fromCharCode(bytes[i]);

        }

        var XLSX = require('xlsx');

        if(rABS) {

             wb = XLSX.read(btoa(fixdata(binary)), { //手動轉化

                  type: 'base64'

             });

        } else {

             wb = XLSX.read(binary, {

                  type: 'binary'

             });

        }

        // outdata就是你想要的東西 excel匯入的資料

        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); 

        // excel 資料再處理

        let arr = []

        outdata.map(v => {

             let obj = {}

             obj.account = v.登入賬號

             obj.name = v.姓名

             obj.department = v.部門

             obj.secondDepartment = v.二級部門

             obj.status = v.狀態

             obj.id = v.id

             arr.push(obj)

        })

        _this.accountList = [...arr];

        console.log( _this.accountList)

         _this.reload();

         }

         reader.readAsArrayBuffer(f);

     }

     if(rABS) {

          reader.readAsArrayBuffer(f);

     } else {

          reader.readAsBinaryString(f);

     }



}

 

 

匯出表格：

1.依賴安裝

cnpm install -S file-saver xlsx

cnpm install -D script-loader

 

 

 

 

 

注意： 對於請求的資料有分頁引數的，pageSize 需設定為無限大，列印出的excel 才是全部的資料，

             若是pageSize 不夠大，只請求到了一部分資料，當然列印出來也只是部分資料

exportExcel: function(){

    require.ensure([], () => {

       　const { export_json_to_excel } = require('../../vendor/Export2Excel');

       　const tHeader = ['投資顧問', '產品', '持倉', '建倉時間', '建倉理由', "聯絡電話"]; //對應表格輸出的title

         const filterVal = ['nickname', 'product_name', 'STOCK_NAME', 'CREATE_DATE', 'product_status','reason','mobile']; // 對應表格輸出的資料

          console.log(returnCitySN);

          const param = {

                 pageNumber : this.currentPage,

                 pageSize : this.pagesize,      // 99999

                 reasonStat: this.reasonStat,

                 mobile: this.search.mobile,

                 nickname: this.search.nickname,

                 productName: this.search.productName,

                 accessIp : returnCitySN["cip"],

                 accessCity : encodeURI(encodeURI(returnCitySN["cname"]))

          };

          getAllPortfolioPosition(param).then((data) => {

                 const exceldata = this.formatJson(filterVal, data.positions);

　　　　　　　　   export_json_to_excel(tHeader, exceldata, '持倉監控excel');  //對應下載檔案的名字

          })　   

                                    

})                },

 

2.傳遞引數 開啟後臺網址

exportExcel() {

                let start =

                    this.formInline.timeRange == null ?

                    "" :

                    this.$check.formatDateTime(this.formInline.timeRange[0]);

                let end =

                    this.formInline.timeRange == null ?

                    "" :

                    this.$check.formatDateTime(this.formInline.timeRange[1]);

                let url =

                    "/mobilepay-management/creditCard/admin/exportOrderExcel?merchantNo=" +

                    this.formInline.merchantNo +

                    "&gmtCreateStart=" +

                    start +

                    "&gmtCreateEnd=" +

                    end +

                    "&repaymentAmountMin=" +

                    this.formInline.repaymentAmountMin +

                    "&repaymentAmountMax=" +

                    this.formInline.repaymentAmountMax +

                    "&withdrawStatus=" +

                    this.generationStatus +

                    "&withholdingStatus=" +

                    this.payStatus;

                console.log(url);

                window.open(url);

            }

 

3.匯出模板（空的excel）

outExe: function(){

     require.ensure([], () => {　　　　　　　　

     const { export_json_to_excel } = require('@/vendor/Export2Excel'); //引入檔案　　　　　　

     const tHeader = ['登入賬號', '姓名', '部門', '二級部門', '狀態']; //將對應的屬性名轉換成中文

     const data = [];　　　　　　

     export_json_to_excel(tHeader, data, '使用者賬號模板');　

})　　

                      },