记笔记:用XLSX前端自己配置表格表头,生成可下载表格模板

179 阅读1分钟

import XLSX from 'xlsx' 1649817288(1).png

image.png

1649817387(1).png `exportBtn() { this.exportExcel() }, // 生成excel数据 exportExcel() { const sheet1data = [{ 身份证号: '', 姓名: '', 手机号: '', 性别: '', 疫苗接种情况: '', 疫苗接种厂家: '', 是否有核酸: '', 是否有社保: '', 是否有医保: '', 人口类型: '', 现住地址: '', 常住地址: '' }] const sheet1 = XLSX.utils.json_to_sheet(sheet1data) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, sheet1,) const workbookBlob = this.workbook2blob(wb) this.openDownloadDialog(workbookBlob, '人口信息模板.xlsx') }, // 将blob对象 创建bloburl,然后用a标签实现弹出下载框 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) }, // 生成excel的配置 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 buf = s2ab(wbout) const blob = new Blob([buf], { type: 'application/octet-stream' }) return blob

  1. `},``