Comment Vue exporte les données JSON vers la méthode de feuille de calcul Excel-js tutoriel-php.cn

Comment Vue exporte les données JSON vers la méthode de feuille de calcul Excel

小云云

Libérer： 2017-12-12 13:12:57

original

2886 Les gens l'ont consulté

Cet article présente principalement l'exemple de Vue exportant des données json vers une feuille de calcul Excel. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra aider tout le monde.

1. Installez les dépendances (fondamentalement les mêmes qu'avant)

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

Copier après la connexion

2. Téléchargez les deux fichiers js requis Blob.js et Export2Excel.js.

Publiez l'adresse de téléchargement ici :

Export2Exce_jb51.rar

3. Créez un nouveau dossier fournisseur dans le répertoire src et placez Blob.js et Export2Excel.js dedans.

4. Modifiez la configuration webpack.base.conf.js

dans l'alias de solve :

&#39;vendor&#39;: path.resolve(__dirname, &#39;../src/vendor&#39;)

Copier après la connexion

5. Dans le fichier .vue

section script

data(){
 return{
  list:[
    {
     name:&#39;韩版设计时尚风衣大&#39;,
     number:&#39;MPM00112&#39;,
     salePrice:&#39;￥999.00&#39;,
     stocknums:3423,
     salesnums:3423,
     sharenums:3423,
   },
   {
     name:&#39;韩版设计时尚风衣大&#39;,
     number:&#39;MPM00112&#39;,
     salePrice:&#39;￥999.00&#39;,
     stocknums:3423,
     salesnums:3423,
     sharenums:3423,
   },
  ]
 }

methods:{
  formatJson(filterVal, jsonData) {
  　　　　return jsonData.map(v => filterVal.map(j => v[j]))
  　　},
  export2Excel() {
  　　　　require.ensure([], () => {
  　　　　　　const { export_json_to_excel } = require(&#39;../../../vendor/Export2Excel&#39;);
  　　　　　　const tHeader = [&#39;商品名称&#39;,&#39;商品货号&#39;,&#39;售价&#39;,&#39;库存&#39;,&#39;销量&#39;,&#39;分享&#39;,];
  　　　　　　const filterVal = [&#39;name&#39;, &#39;number&#39;, &#39;salePrice&#39;, &#39;stocknums&#39;, &#39;salesnums&#39;, &#39;sharenums&#39;, ];
  　　　　　　const list = this.goodsItems;
  　　　　　　const data = this.formatJson(filterVal, list);
  　　　　　　export_json_to_excel(tHeader, data, &#39;商品管理列表&#39;);
  　　　　})
  　 }
}

Copier après la connexion

modèle :

<button @click="export2Excel">导出</button>

Copier après la connexion

Voici les explications :

1. Le chemin de require dans export2Excel() peut devoir être ajusté séparément en raison des différentes structures de projet personnel If. introuvable './../Export2Excel.js' etc. Veuillez modifier le chemin vous-même.

2. tHeader est le nom de chaque colonne et doit être saisi manuellement.