基于vue来前端生成excel模板(支持多sheet,动态表头等,导入模板,傻瓜式模板)
workbook2blob (workbook) {// 生成excel的配置项var wopts = {// 要生成的文件类型bookType: 'xlsx',// // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性bookSST: false,type: 'binary'.
·
workbook2blob (workbook) {
// 生成excel的配置项
var wopts = {
// 要生成的文件类型
bookType: 'xlsx',
// // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
bookSST: false,
type: 'binary'
}
var wbout = XLSX.write(workbook, wopts)
// 将字符串转ArrayBuffer
function s2ab (s) {
var buf = new ArrayBuffer(s.length)
var view = new Uint8Array(buf)
for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
return buf
}
let buf = s2ab(wbout)
var blob = new Blob([buf], {
type: 'application/octet-stream'
})
return blob
},
// 将blob对象 创建bloburl,然后用a标签实现弹出下载框
openDownloadDialog (blob, fileName) {
if (typeof blob === 'object' && blob instanceof Blob) {
blob = URL.createObjectURL(blob) // 创建blob地址
}
var aLink = document.createElement('a')
aLink.href = blob
// HTML5新增的属性,指定保存文件名,可以不要后缀,注意,有时候 file:///模式下不会生效
aLink.download = fileName || ''
var 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)
},
exportBtn () {
this.exportExcel()
},
exportExcel () {
let sheet1data = [{ 部门: '行政部', 数量: 2 }, { 部门: '前端部', 数量: 3 }]
let sheet2data = [{ 姓名: '张三', 事件: '整理文件' }, { 姓名: '李四', 事件: '打印' }]
let sheet3data = [{ 名称: '王五', 工种: 'Vue' }, { 名称: '二楞', 工种: 'react' }]
var sheet1 = XLSX.utils.json_to_sheet(sheet1data)
var sheet2 = XLSX.utils.json_to_sheet(sheet2data)
var sheet3 = XLSX.utils.json_to_sheet(sheet3data)
console.log(sheet1, sheet2, sheet3, 'sheet123')
// 创建一个新的空的workbook
var wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, sheet1, '部门统计')
XLSX.utils.book_append_sheet(wb, sheet2, '行政部')
XLSX.utils.book_append_sheet(wb, sheet3, '前端部')
const workbookBlob = this.workbook2blob(wb)
this.openDownloadDialog(workbookBlob, '部门统计.xls')
},
三个方法,贴进去就可以用,搞个button调用exportBtn 就完事
是基于vue,需要引入对应依赖包XLSX
下载方法
terminal里面输入
npm install xlsx --save
然后在头部引入
import XLSX from 'xlsx';
完事
更多推荐
已为社区贡献1条内容
所有评论(0)