In diesem Artikel wird hauptsächlich die Funktion von Vue zum Exportieren von Excel-Tabellen vorgestellt. Am Ende des Artikels habe ich den Import- und Exportcode von Excel-Tabellen in Vue erwähnt
Einführung:
Kürzlich verwende ich Vue, um ein Backend-System zu erstellen. Nach dem Generieren einer Tabelle auf der Seite kann iView die Tabelle, aber es kann nur CSV exportiert werden. Das Format ist nicht für die Projektanforderungen geeignet.
Wenn Sie Excel exportieren möchten
Erstellen Sie eine Datei (Anbieter) im src-Verzeichnis und geben Sie Blob.js und Export2Excel.js ein
npm install -S file-saver Eine Webanwendung zum Generieren von Dateien
npm install -S xlsx Ein Parser für Tabellenformate
npm install -D script-loader hängt js global auf
Tabellenstruktur
Die Tabellenstruktur auf der gerenderten Seite ist die gerenderten Spalten Bei den Spalten und TableData-Zeilen handelt es sich um die Tabellenkopfdaten und bei TableData handelt es sich um den Tabellenentitätsinhalt
columns1: [ { title: '序号', key: 'serNum' }, { title: '选择', key: 'choose', align: 'center', render: (h, params) => { if (params.row.status !== '1' && params.row.status !== '2') { return h('p', [ h('checkbox', { props: { type: 'selection' }, on: { 'input': (val) => { console.log(val) } } }) ]) } else { return h('span', { style: { color: '#587dde', cursor: 'pointer' }, on: { click: () => { // this.$router.push({name: '', query: { id: params.row.id }}) } } }, '查看订单') } } }, ... ],
tableData. Die spezifische Datenstruktur finden Sie unter iViewAPI
Das Build-Verzeichnis von Webpack. base.conf.js konfiguriert den Pfad, den wir laden möchten
alias: { 'src': path.resolve(__dirname, '../src'), }
Führt Abhängigkeiten in die aktuelle Seite ein
require('script-loader!file-saver') // 转二进制用 require('script-loader!src/vendor/Blob') // xlsx核心 require('script-loader!xlsx/dist/xlsx.core.min')
Wenn wir die Tabelle exportieren möchten, führen Sie den @click aus Ereignis und rufen Sie die handleDownload-Funktion auf
handleDownload() { this.downloadLoading = true require.ensure([], () => { const {export_json_to_excel} = require('src/vendor/Export2Excel') const tHeader = Util.cutValue(this.columns1, 'title') const filterVal = Util.cutValue(this.columns1, 'key') const list = this.tableData1 const data = this.formatJson(filterVal, list) export_json_to_excel(tHeader, data, '列表excel') this.downloadLoading = false }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }
Util.cutValue ist eine öffentliche Methode, deren Zweck darin besteht, die Werte von tHeader und filterVal in Arrays umzuwandeln, um Tabellen zu generieren
### Util module // 截取value值 utils.cutValue = function (target, name) { let arr = [] for (let i = 0; i < target.length; i++) { arr.push(target[i][name]) } return arr }
Export2Excel.js/ Blob.js-Code
Werfen wir einen Blick auf den Import und Export von Excel-Tabellen in Vue
Hinweis: Um den Import und Export zu implementieren Um Tabellen in Vue zu erstellen, müssen Sie zunächst zwei Abhängigkeiten installieren:
npm install -S file-saver xlsx
und npm install -D script-loader
. Zweitens erstellen Sie einen neuen Ordner Vendor (der Name ist beliebig) im Projekt-SRC-Verzeichnis und platzieren Sie zwei Dateien Blob.js und Export2Excal.js in diesem Ordner (Download-Adresse: http://files.cnblogs.com/files/wangyunhui). /vendor.rar). Danach können Sie Smiles problemlos importieren und exportieren.
1. Importieren
1.<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就是你想要的东西 } reader.readAsArrayBuffer(f); } if(rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } }
2. Exportieren
inportexcel: function() { //兼容ie10哦! require.ensure([], () => { const { export_json_to_excel } = require('../../vendor/Export2Excel'); //引入文件 const tHeader = ['用户名', '姓名', '部门', '职位', '邮箱', '充值']; //将对应的属性名转换成中文 // const tHeader = []; const filterVal = ['userName', 'realName', 'department', 'position', 'email', 'money'];//table表格中对应的属性名 const list = this.sels; const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '列表excel'); }) }
Das habe ich für alle zusammengestellt die Zukunft.
Verwandte Artikel:
Detaillierte Erklärung, wie Vue serverseitiges Rendering basierend auf Nuxt.js implementiert
Express-Standardprotokollkomponente Morgan's Methode
Beispielcode für die schwebende Schaltflächenkomponente React Native
Das obige ist der detaillierte Inhalt vonVue implementiert die Funktion zum Exportieren von Excel-Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!