vue 创建excel表格并下载到本地

最新推荐文章于 2022-08-15 16:02:36 发布

晨鼠

最新推荐文章于 2022-08-15 16:02:36 发布

阅读量598

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/q_qq8/article/details/115303324

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这段代码展示了如何在Vue.js应用中利用XLSX和FileSaver库将表格数据导出为Excel文件。通过监听`exportExcel`点击事件，从`#out-table`元素生成工作簿对象，然后写入二进制字符串并保存为.xlsx文件。

摘要由CSDN通过智能技术生成

<template>
  <el-button type="primary" icon="el-icon-download" style="margin-top:0;" size="small"
						@click="exportExcel">模板下载
  </el-button>
  <el-table :data="tableData" border style="width: 100%" id="out-table">
					<!-- <el-table-column type="index" :index="indexMethod" prop="date" label="序号" width="80">
					</el-table-column> -->
					<el-table-column prop="userCollege" label="学院">
					</el-table-column>
					<el-table-column prop="userGrade" label="年级">
					</el-table-column>
					<el-table-column prop="userId" label="学号">
					</el-table-column>
					<el-table-column prop="userName" label="姓名">
					</el-table-column>
					<el-table-column prop="academicName" label="学术活动名称">
					</el-table-column>
					<el-table-column prop="academicTheme" label="学术活动主题">
					</el-table-column>
					<el-table-column prop="academicType" label="学术活动类型">
					</el-table-column>
					<el-table-column prop="academicStarttime" label="学术活动开始时间">
					</el-table-column>
					<el-table-column prop="academicEndtime" label="学术活动结束时间">
					</el-table-column>
					<el-table-column prop="academicCode" label="学术活动编码">
					</el-table-column>
				</el-table>
</template>
<script>
  // 引入导出Excel表格依赖
	import FileSaver from "file-saver";
	import XLSX from "xlsx";
	export default {
	data(){
	return{
	tableData:[{
	academicCode: "4",
academicEndtime: "2021-03-12 00:00:00",
academicName: "苹果苹果",
academicStarttime: "2021-03-09 00:00:00",
academicTheme: "苹果苹果",
academicType: "校级讲座",
userCollege: "学院",
userGrade: "2",
userId: "2018221001",
userName: "万俊彪"
	}]
	}
	},
	methods:{
	//定义导出Excel表格事件
			exportExcel() {
				/* 从表生成工作簿对象 */
				var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"), {
					raw: true
				});
				/* 获取二进制字符串作为输出 */
				var wbout = XLSX.write(wb, {
					bookType: "xlsx",
					bookSST: true,
					type: "array"
				});
				try {
					FileSaver.saveAs(
						//Blob 对象表示一个不可变、原始数据的类文件对象。
						//Blob 表示的不一定是JavaScript原生格式的数据。
						//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
						//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
						new Blob([wbout], {
							type: "application/octet-stream"
						}),
						//设置导出文件名称
						"sheetjs.xlsx"
					);
				} catch (e) {
					if (typeof console !== "undefined") console.log(e, wbout);
				}
				return wbout;
			},

	}
	}
</script>