1. 程式人生 > >Vue中excel匯入匯出

Vue中excel匯入匯出

npm安裝

npm install -S file-saver xlsx(這裡其實安裝了2個依賴)
npm install -D script-loader

在src下建立一個資料夾,包含兩個檔案:

Blob.js,Export2Excel.js下載地址:https://gitee.com/BenDanXianSheng/excel_relyon.git

然後再main.js中匯入這兩個檔案;

匯入code:

HTML:
<input id="upload" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                importfxx(obj) {
                        let _this = this;
                    console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxx1");
                    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 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的東西
                        console.log(outdata)
                        _this.$message({
                            message: '匯入成功',
                            type: 'success'
                        });
                        };
                        reader.readAsArrayBuffer(f);
                    };
                    if (rABS) {
                        reader.readAsArrayBuffer(f);
                    } else {
                        reader.readAsBinaryString(f);
                    }
                }

匯出code:

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },
        export2Excel() {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../../excel/Export2Excel');//這裡必須使用絕對路徑
                const tHeader = ['事項','重要程度','狀態','成果物','開始時間','結束時間','延期時間','成果物'];// 匯出的表頭名
                const filterVal = ['title', 'level', 'status', 'gain','startdate', 'enddate', 'newenddate','description', ];// 匯出的表頭欄位名
                var xlsxTable = this.tableData4Dc
                xlsxTable.forEach((item,i)=>{
                    console.log(item)
                    if(item.level==2){
                        item.level = "重要"
                    }else{
                        item.level = "一般"
                    }
                    if(item.status==1){
                        item.status="進行中"
                    }else if(item.status==2){
                        item.status ="稽核中"
                    }else{
                        item.status="已完成"
                    }
                })
                const list = xlsxTable;
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, this.responsibility);// 匯出的表格名稱,根據需要自己命名
      })
       },