vue下载xlsx表格

vue下载xlsx表格

复制代码
// 导入依赖库
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
methods:{
	btn(){
	let date = new Date()
    let Y = date.getFullYear() + '-'
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    var dates='体检接口_'+Y + M + D
		
		// 构建表格数据
        const header = ['序号', '系统编码', '系统名称', '编码', '名称', '单位', '单位转换','转换参数',];
            const data1 = this.rightArr.map((item,index) => [index+1, item.sysCode, item.sysName,item.code,item.name,item.unit,'','']);
            const worksheet = XLSX.utils.aoa_to_sheet([header, ...data1]);

            // 创建工作簿并保存到本地
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
            // const date = new Date().toLocaleDateString();
            const fileName = `${dates}.xlsx`;//表格名称
            const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
            FileSaver.saveAs(blob, fileName);
	}
}
相关推荐
To_OC3 小时前
别再瞎写 React Router!7 个高频踩坑点一次性讲透
前端·javascript·react.js
岭南灯火5 小时前
前端通用交互式几何编辑器的开发经验
前端·设计模式·架构
岭南灯火5 小时前
前端通用交互式几何编辑器的设计法则 7 - 设计模式与原则
前端·设计模式·架构
岭南灯火5 小时前
前端通用交互式几何编辑器的设计法则 4 - 绘制、悬停与编辑
前端·设计模式·架构
岭南灯火5 小时前
前端通用交互式几何编辑器的设计法则 3 - 数据对象的设计
前端·javascript·架构
Jackson__5 小时前
从 LLM 到 Agent:一篇文章搞懂 AI 圈热词!
前端·agent·ai编程
岭南灯火5 小时前
前端通用交互式几何编辑器的设计法则 2 - 交互事件流
前端·javascript·架构
岭南灯火5 小时前
前端通用交互式几何编辑器的设计法则 6 - 配套设施与工程化
前端·设计模式·架构
岭南灯火5 小时前
前端通用交互式几何编辑器的设计法则 5 - 辅助元素的设计
前端·设计模式·架构
岭南灯火5 小时前
前端通用交互式几何编辑器的设计法则 1 - 入口的对象及其成员
前端·javascript·架构