Maison > Article > interface Web > Vue implémente la fonction d'exportation de tableaux Excel
Cet article présente principalement la fonction d'export de tables Excel de Vue. A la fin de l'article, j'ai mentionné le code d'importation et d'exportation de tables Excel dans Vue. Les amis dans le besoin peuvent s'y référer
<.>Introduction :
Récemment, j'utilise vue pour construire un système backend. La pile technologique est vue + iView. Après avoir généré un tableau sur la page, iView peut exporter le. table, mais il ne peut exporter que csv. Le format n'est pas adapté aux besoins du projet. Si vous souhaitez exporter ExcelStructure du tableau
La structure du tableau dans la page rendue est Les colonnes rendues by columns et les lignes tableData sont des données d'en-tête de table et tableData est le contenu de l'entité de tablecolumns1: [ { 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 Je ne l'écrirai pas ici Pour la structure de données spécifique, voir iViewAPI dans. le répertoire build. webpack.base.conf.js Configurer le chemin que nous voulons charger
alias: { 'src': path.resolve(__dirname, '../src'), }Introduire les dépendances dans la page actuelle
require('script-loader!file-saver') // 转二进制用 require('script-loader!src/vendor/Blob') // xlsx核心 require('script-loader!xlsx/dist/xlsx.core.min')Lorsque nous voulons exporter la table, exécutez l'événement @click et appelez la fonction handleDownload
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 est une méthode publique, le but est de convertir les valeurs de tHeader et filterVal en tableaux pour générer des tables
### 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 }Code Export2Excel.js/Blob.js
Jetons un coup d'œil à l'import et à l'export de tableaux Excel dans vue
Remarque : Pour implémenter l'importation et l'exportation de tables dans vue, vous devez d'abord installer deux dépendances, et npm install -S file-saver xlsx
. Deuxièmement, créez un nouveau dossier supplier (le nom est arbitraire) dans le répertoire src du projet et placez deux fichiers Blob.js et Export2Excal.js sous ce dossier (adresse de téléchargement : http://files.cnblogs.com/files/wangyunhui /fournisseur.rar). Ensuite, vous pourrez facilement importer et exporter des sourires. npm install -D script-loader
1. Importer
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. Exporter
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'); }) }Ce qui précède est ce que j'ai compilé pour vous, j'espère que ce sera le cas. utile pour vous dans le futur. Articles connexes :
Explication détaillée de la façon dont Vue implémente le rendu côté serveur basé sur Nuxt.js
Composant de journal express par défaut de Morgan méthode
Exemple de code pour le composant de bouton flottant React Native
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!