Heim > Web-Frontend > js-Tutorial > Betreiben Sie Vue, um eine Excel-Tabelle zu exportieren

Betreiben Sie Vue, um eine Excel-Tabelle zu exportieren

php中世界最好的语言
Freigeben: 2018-04-20 16:02:08
Original
2819 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen beim Betrieb von Vue zum Exportieren einer Excel-Tabelle vorstellen. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Einführung:

Ich habe kürzlich Vue zum Erstellen eines Backend-Systems verwendet, den Technologie-Stack Vue + iView. Nach dem Generieren der Tabelle auf der Seite kann iView die Tabelle exportieren. Es kann jedoch nur im CSV-Format exportiert werden, das nicht für Projektanforderungen 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 }})
     }
     }
    }, '查看订单')
    }
   }
   },
   ...
  ],
Nach dem Login kopieren

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'),
 }
Nach dem Login kopieren

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')
Nach dem Login kopieren

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]))
  }
Nach dem Login kopieren

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
}
Nach dem Login kopieren

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); 
} 
}
Nach dem Login kopieren

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');       
}) 
}
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben , spannender Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Erstellen Sie einen globalen Suchcode und markieren Sie ihn

Nutzungsschritte für den Angular4-Router

Datenkommunikation zwischen mehreren Komponenten angle4

Das obige ist der detaillierte Inhalt vonBetreiben Sie Vue, um eine Excel-Tabelle zu exportieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage