FileSaver+xlsx 表格下载为excel

最新推荐文章于 2025-09-17 13:59:39 发布

原创最新推荐文章于 2025-09-17 13:59:39 发布 · 664 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #js #vue

前端专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中结合ElementUI实现表格数据导出为Excel文件。首先，你需要下载FileSaver.js和SheetJS的js-xlsx库，并将它们放入项目的相应目录。接着，在HTML中引入这两个库的JS文件。然后，定义一个`exportData`方法，该方法使用SheetJS的`table_to_book`和`write`函数将表格转换并写入Excel格式。最后，利用FileSaver.js的`saveAs`方法保存生成的Excel文件。确保在表格元素上设置`id=exportable`以便正确选取表格进行导出。

部署运行你感兴趣的模型镜像

安装依赖形式，参考 vue+elementUI 表格下载为excel

1. 下载地址

FileSaver.js
SheetJS js-xlsx

下载后，分别从 dist 文件夹下复制出以下两个文件，放在相应目录下

1.引入js

<script lang="javascript" src="js/xlsx.full.min.js"></script>
<script src="js/FileSaver.min.js" charset="utf-8"></script>

2.添加方法

exportData() {
	var xlsxParam = { raw: true };
	var wb = XLSX.utils.table_to_book(document.querySelector('#exportable'),xlsxParam);
	var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
	try {
		saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '薪资明细.xlsx')
	} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
	return wbout
},

3.添加id

<el-table id="exportable" ref="table" :height="tableHeight" highlight-current-row  v-loading="loading" :data="tableData" >

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率