npm install xlsx@0.16.0 file-saver@2.0.2 --save
//引入文件
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
//获取当前表格的内容
function exportClick(){
let xlsxParam = { raw: true }
// 设置当前日期
let time = new Date()
let year = time.getFullYear()
let month = time.getMonth() + 1
let day = time.getDate()
let name = year + '' + month + '' + day
// console.log(name)
/* generate workbook object from table */
// .excelTable要导出的是哪一个表格 注意这里的 excelTable 是要导出的表格的类名
let wb = XLSX.utils.table_to_book(document.querySelector('#excelTable'), xlsxParam)
/* get binary string as output */
let 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)
this.$message({
message: e + wbout,
type: 'error'
})
}
}
return wbout
}
//获取的数据是json形式
先在data数据源定义以下变量
autoWidth: true,
bookType: 'xlsx'
function handleDownload() {
// 设置当前日期
let time = new Date()
let year = time.getFullYear()
let month = time.getMonth() + 1
let day = time.getDate()
let name = year + '' + month + '' + day
// 这个文件是vue-element-admin里边自带的，跟着路径你就能找到，不用担心把报错
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['头像', '标题', 'Author'] // 这个就是excel表格的头部名称
const filterVal = ['date', 'name', 'address'] // 这个就是从导出的数据在你数组里的名字
const list = tableDat.value // 这个就是你页面循环的那个数组,如果你想全部导出的话,数组就需要是全部数据
const data = formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: name, // 这个就是你导出的文件的名字
autoWidth: autoWidth.value,
bookType: bookType.value
})
})
}
function formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
}