1 下载依赖
npm install xlsx
2 创建公用导出excel方法exportExcel.js
import * as XLSX from 'xlsx'
export const download = (data,filename) =>{
data.forEach(el => {
const sheet = XLSX.utils.json_to_sheet(el.sheetData)
XLSX.utils.book_append_sheet(wb, sheet, `${el.ip}${el.dbType}`)
});
const workbookBlob = workbook2blob(wb)
console.log(workbookBlob,'workbookBlob')
// 导出最后的总表
// openDownloadDialog(workbookBlob, filename)
return workbookBlob
}
const workbook2blob = (workbook) => {
// 生成excel的配置项
const wopts = {
// 要生成的文件类型
bookType: 'xlsx',
// // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
bookSST: false,
type: 'binary'
}
const wbout = XLSX.write(workbook, wopts)
// 将字符串转ArrayBuffer
function s2ab (s) {
const buf = new ArrayBuffer(s.length)
const view = new Uint8Array(buf)
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
return buf
}
const blob = new Blob([s2ab(wbout)], {
type: 'application/octet-stream'
})
return blob
}
const openDownloadDialog = (blob, fileName) => {
if (typeof blob === 'object' && blob instanceof Blob) {
blob = URL.createObjectURL(blob) // 创建blob地址
}
const aLink = document.createElement('a')
aLink.href = blob
// HTML5新增的属性,指定保存文件名,可以不要后缀,注意,有时候 file:///模式下不会生效
aLink.download = fileName || '' ;
let event
if (window.MouseEvent) event = new MouseEvent('click')
// 移动端
else {
event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
}
aLink.dispatchEvent(event)
}
3 使用
(1)引入导出方法
import { download } from '@/js/exportExcel'
(2) 创建数据并使用
let data = [
{
name:'sheet',
list:[
{
id: '1',
name: 'zhang',
},
{
id: '2',
name: 'wang',
},
]
},{
name:'sheet2',
list:[
{
id: '3',
name: 'li'
},
{
id: '4',
name: 'zhao',
},
]
}]
download (data,filename)