Comment exporter un tableau Excel à l'aide de Vue-js tutoriel-php.cn

Comment exporter un tableau Excel à l'aide de Vue

php中世界最好的语言

Libérer： 2018-05-11 13:33:44

original

2029 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser Vue pour exporter un tableau Excel. Quelles sont les précautions pour utiliser Vue pour exporter un tableau Excel. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Introduction :

Récemment utilisé vue pour construire un système backend, pile technologique vue + iView, après avoir généré un tableau dans la page, iView peut Réaliser l'exportation de tableaux, mais il ne peut exporter qu'au format csv, ce qui ne convient pas aux exigences du projet.

Si vous souhaitez exporter Excel

Créez un fichier (fournisseur) dans le répertoire src et saisissez Blob.js et Export2Excel.js
npm install -S file-saver Une application Web utilisée pour générer des fichiers
npm install -S xlsx Un analyseur pour les formats de feuilles de calcul
npm install -D script-loader bloque js globalement

Structure 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 table

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 }})
     }
     }
    }, '查看订单')
    }
   }
   },
   ...
  ],

Copier après la connexion

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'),
 }

Copier après la connexion

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')

Copier après la connexion

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]))
  }

Copier après la connexion

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
}

Copier après la connexion

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,

npm install -S file-saver xlsx et npm install -D script-loader. 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). Après cela, vous pourrez facilement importer et exporter des sourires.

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(&#39;xlsx&#39;); 
if(rABS) { 
wb = XLSX.read(btoa(fixdata(binary)), { //手动转化 
type: &#39;base64&#39; 
}); 
} else { 
wb = XLSX.read(binary, { 
type: &#39;binary&#39; 
}); 
} 
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西 
} 
reader.readAsArrayBuffer(f); 
} 
if(rABS) { 
reader.readAsArrayBuffer(f); 
} else { 
reader.readAsBinaryString(f); 
} 
}

Copier après la connexion

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');　　　　　　 
}) 
}

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. , plus excitant Veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Explication détaillée de l'utilisation des paires clé-valeur stockées dans js

Explication détaillée de étapes pour télécharger des images et des fichiers dans vue

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!