VUE中导出Excel功能

VUE中导出Excel功能

1、下载依赖
cnpm install file-saver@1.3.3 ---------用来保存文件
cnpm install --save-dev script-loader
cnpm install jszip ---------导出为压缩文件‘
cnpm install xlsx ---------excelc=处理库

2、创建Blog.js、Export2Excel.js、Export2Zip.js

3、触发事件
/**

• excel导出
  */
  exportTable () {
  this.getExpportData()
  },

/**

• 对导出数据格式处理
  */
  formatJson (filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
  },

/**

• 导出的列表数据
  /
  getExpportData: function () {
  require.ensure([], () => {
  / eslint-disable /
  // 这里的径路要修改正确
  const { export_json_to_excel } = require(’…/…/vendor/Export2Excel’)
  / eslint-enable */
  // 导出的表头
  const tHeader = [‘日期’, ‘代理数’, ‘疑似代理数’, ‘在线数’, ‘处理数’]
  // 导出表头要对应的数据
  const filterVal = [‘date’, ‘Many_agents’, ‘connection’, ‘Online’, ‘Processing’]
  // 如果对导出的数据没有可处理的需求，把下面的handleDataList换成res.data.list即可，删掉上面相应的代码
  const data = this.formatJson(filterVal, this.tableData)
  // this.DefaultData.formatLongDate.getNow()自己写的一个获取当前时间，方便查找导出后的文件。根据需求自行可处理。
  export_json_to_excel(tHeader, data, ‘实时数据’)
  this.$message({
  message: ‘导出成功’,
  duration: 2000,
  type: ‘success’
  })
  })
  }

处理数据函数：
formatJson(filterVal, jsonData) {
return jsonData.map(v => {
filterVal.map(j => {
return v[j]
})
})
}

2、import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’

const name = ‘haha’
var wb = XLSX.utils.table_to_book(document.querySelector(’.tableDate’))
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: ‘xlsx’,
bookSST: true,
type: ‘array’
})
try {
// name+’.xlsx’表示导出的excel表格名字
FileSaver.saveAs(
new Blob([wbout], { type: ‘application/octet-stream’ }),
name + ‘.xlsx’
)
} catch (e) {
if (typeof console !== ‘undefined’) console.log(e, wbout)
}
return wbout

EXport2Zip.js

/* eslint-disable */

require(‘script-loader!file-saver’);

import JSZip from ‘jszip’

export function export_txt_to_zip(th, jsonData, txtName, zipName) {

const zip = new JSZip()

const txt_name = txtName || ‘file’

const zip_name = zipName || ‘file’

const data = jsonData

let txtData = ${th}\r\n

data.forEach((row) => {

let tempStr = ''

tempStr = row.toString()

txtData += `${tempStr}\r\n`

})

zip.file(${txt_name}.txt, txtData)

zip.generateAsync({type:“blob”}).then((bl