So verwenden Sie Vue zum Exportieren einer Excel-Tabellenfunktion

Dieses Mal zeige ich Ihnen, wie Sie Vue zum Exportieren von Excel-Tabellen verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue zum Exportieren von Excel-Tabellen?

Einführung:

Kürzlich habe ich Vue zum Erstellen eines Backend-Systems verwendet, Technologie-Stack Vue + iView, nach dem Generieren einer Tabelle auf der Seite, iView kann den Export von Tabellen realisieren, jedoch nur im CSV-Format exportieren, was für Projektanforderungen nicht geeignet ist.

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 by columns und tableData rows sind Tabellenkopfdaten und tableData sind Tabellenentitätsinhalte

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. webpack.base.conf.js Konfigurieren Sie den Pfad, den wir laden möchten

alias: {
  'src': path.resolve(dirname, '../src'),
 }

Fügen Sie 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 das @click-Ereignis aus 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. Der Zweck besteht darin, die Werte von tHeader und filterVal in Arrays zu konvertieren, 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 von Tabellen in Vue zu implementieren, 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(&#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); 
} 
}

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

Glauben Sie es oder nicht Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Die Groß-/Kleinschreibungskonvertierungsmethode des JSON-Objekts

So führen Sie eine globale Suche im WeChat-Applet durch Erinnerung an die Code-Hervorhebung

Detaillierte Erläuterung der Router-Nutzung in Angular4

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue zum Exportieren einer Excel-Tabellenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!