Detailed explanation of Vue export excel table example

This time I will bring you a detailed explanation of an example of Vue exporting an excel table. What are the precautions for Vue exporting an excel table. The following is a practical case, let's take a look.

Introduction:

Recently using vue to build a backend system, the technology stack vue iView, after generating a table in the page, iView can be implemented The table can be exported, but it can only be exported in csv format, which is not suitable for project requirements.

If you want to export Excel

• Create a file (vendor) in the src directory and enter Blob.js and Export2Excel.js

• npm install -S file-saver A web application used to generate files

• npm install -S xlsx A parser for spreadsheet format

• npm install -D script-loader Hang js globally

Table structure

The table structure in the rendered page is The columns rendered by columns and tableData rows are table header data and tableData is table entity content.

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 will not be written here. For the specific data structure, see iViewAPI

in the build directory webpack. base.conf.js configures the path we want to load

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

Introduce dependencies into the current page

require('script-loader!file-saver')
 // 转二进制用
 require('script-loader!src/vendor/Blob')
 // xlsx核心
 require('script-loader!xlsx/dist/xlsx.core.min')

When we want to export the table, execute the @click event and call the handleDownload function

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 is a public method, the purpose is to convert the values ​​​​of tHeader and filterVal into arrays to generate tables

### Util module
// 截取value值
utils.cutValue = function (target, name) {
 let arr = []
 for (let i = 0; i <p style="text-align: left;">Export2Excel.js/Blob.js code</p><p style="text-align: left;"><span style="color: #ff0000"><strong>Let’s look at the import and export of excel tables in vue</strong></span></p><p style="text-align: left;">Note: To implement the import and export of tables in vue, you must first install two dependencies,</p><p style="text-align: left;"><code>npm install -S file-saver xlsx</code> and <code> npm install -D script-loader</code>. Secondly, create a new folder vendor (the name is arbitrary) in the project src directory, and place two files Blob.js and Export2Excal.js under this folder (download address: http://files.cnblogs.com/files/wangyunhui /vendor.rar). After that, you can happily import and export smiles. </p><p style="text-align: left;"><strong>1. Import </strong></p><pre class="brush:php;toolbar:false">1.<input> 
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 <p style="text-align: left;">2. Export </p><pre class="brush:php;toolbar:false">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');　　　　　　 
}) 
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

How json objects implement the case conversion function of array key values

Highlighting of results during global search How to achieve

The above is the detailed content of Detailed explanation of Vue export excel table example. For more information, please follow other related articles on the PHP Chinese website!