xlsx 前端插件 导出 elment表格示例

安装

yarn add xlsx
yarn add file-saver

git文档：https://github.com/rockboom/SheetJS-docs-zh-CN
npm地址：https://www.npmjs.com/package/xlsx

代码

<template>
	<div class='box'>
		pageC

		<el-button type="primary" size="default" @click="exportExcel">导出表格</el-button>

		<div>
			<el-table id="exportTable" ref="tableRef" :data="tableData" border>
				<el-table-column label="姓名" prop="name" />
				<el-table-column label="头像" prop="image">
					<template v-slot='{ row }'>
						<el-image :src="row.image" fit="cover" :lazy="true"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="年龄" prop="age" />
				<el-table-column label="性别" prop="sex" />
				<el-table-column label="省" prop="province" />
				<el-table-column label="市" prop="city" />
				<el-table-column label="区县" prop="region" />
			</el-table>
		</div>
	</div>
</template>
<script lang='ts' setup>
// import { ref, reactive, computed, onMounted, nextTick } from 'vue';

import * as XLSX from 'xlsx';

import FileSaver from "file-saver"

// import Mock from "mockjs"
import Mock, { Random } from "mockjs";

const resData = Mock.mock({
	// key中min-max 代表随机生成5到10条数组数据
	'list|5-10': [{
		//value @id 可以随机生成id
		'id': '@id',
		'name': '@name',
		'image': '@image',
		'title': '@title',
		'string': '@string',
		'county': '@county',
		'province': '@province',
		'city': '@city',
		'region': '@region',
		'date': '@date',
		// 函数Random 可以调用各种api随机生成字符
		'time': Random.time(),
		//key中18-30代表随机18到30其中一个数
		'age|18-30': 18,
		// key 中 1代表数组中随机选择一个
		'sex|1': ['男', '女'],
	}]
})

const tableData = resData.list;

console.log(tableData, "tableData_SDLSJLFK")

const tableRef = ref<Element>()


// /**
//  * @description: 
//  * @param {*} json
//  * @return {*}
//  */
// function exportExcell(json) {
// 	// const excelData = [
// 	// 	['姓名', '年龄', '性别'],
// 	// 	['dyx', '26', '男'],
// 	// 	['dyxweb', '26', '男'],
// 	// ];
// 	const wb = XLSX.utils.book_new();
// 	const ws = XLSX.utils.aoa_to_sheet(json);
// 	XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将数据添加到工作薄
// 	XLSX.writeFile(wb, 'test.xlsx'); // 导出Excel



// }



// function exportHtmlTable() {
// 	// console.log(tableRef,"tableRef")
// 	//获取dom元素
// 	var table_dom = document.querySelector('.el-table__body')
// 	//将dom转换为book
// 	const new_book = XLSX.utils.table_to_book(table_dom)
// 	// 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
// 	XLSX.writeFile(new_book, '数据导出.xlsx')

// }


function exportExcel() {
	//转换成excel时，使用原始的格式
	var xlsxParam = { raw: true };
	let fix = document.querySelector(".el-table__fixed");
	let wb;
	//判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
	if (fix) {
		wb = XLSX.utils.table_to_book(
			document.querySelector("#exportTable")!.removeChild(fix), xlsxParam
		);
		document.querySelector("#exportTable")!.appendChild(fix);
	} else {
		wb = XLSX.utils.table_to_book(document.querySelector("#exportTable"), xlsxParam);
	}

	var wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
		type: "array",
	});
	try {
		FileSaver.saveAs(
			new Blob([wbout], { type: "application/octet-stream" }),
			"我的测试导出表格.xlsx"
		); //文件名
	} catch (e) {
		if (typeof console !== "undefined") console.log(e, wbout);
	}
	return wbout;
}



</script>
<style lang='scss' scoped></style>

导出效果

用到的xlsx api 部分文档

• XLSX.utils.table_to_book
  
• XLSX.write
  

具体可以查看文档

https://github.com/rockboom/SheetJS-docs-zh-CN