前端导出Excel终极方案：纯前端实现表格数据导出（兼容主流浏览器）

qq_24800489

已于 2025-03-22 13:28:07 修改

阅读量474

点赞数 3

分类专栏： javascript高级 javascript操作dom 文章标签：前端 excel

于 2025-03-21 17:43:10 首次发布

本文链接：https://blog.csdn.net/qq_24800489/article/details/146426095

版权

2 篇文章

订阅专栏

2 篇文章

订阅专栏

引言

在Web开发中，导出Excel功能是常见需求。传统方案通常需要后端配合生成文件，但今天我们将介绍一种纯前端实现方案，通过HTML模板+Base64编码实现Excel导出，无需依赖后端服务。本文将详细解析代码实现原理，并提供可直接使用的解决方案。

javascript复制代码

	`const getExplorer = () => {`
	`const explorer = window.navigator.userAgent;`
	`if (explorer.indexOf('MSIE') >= 0) return 'ie';`
	`if (explorer.indexOf('Firefox') >= 0) return 'Firefox';`
	`if (explorer.indexOf('Chrome') >= 0) return 'Chrome';`
	`if (explorer.indexOf('Opera') >= 0) return 'Opera';`
	`if (explorer.indexOf('Safari') >= 0) return 'Safari';`
	`};`

通过检测userAgent识别浏览器类型，对IE浏览器直接提示不支持。

javascript复制代码

	`const tableToNotIE = (function () {`
	`const uri = 'data:application/vnd.ms-excel;base64,';`
	const template = `
	`<html xmlns:o="urn:schemas-microsoft-com:office:office"`
	`xmlns:x="urn:schemas-microsoft-com:office:excel"`
	`xmlns="http://www.w3.org/TR/REC-html40">`
	`<head>`
	`<meta charset="UTF-8">`
	`<!--[if gte mso 9]>`
	`<xml>`
	`<x:ExcelWorkbook>`
	`<x:ExcelWorksheets>`
	`<x:ExcelWorksheet>`
	`<x:Name>{worksheet}</x:Name>`
	`<x:WorksheetOptions>`
	`<x:DisplayGridlines/>`
	`</x:WorksheetOptions>`
	`</x:ExcelWorksheet>`
	`</x:ExcelWorksheets>`
	`</x:ExcelWorkbook>`
	`</xml>`
	`<![endif]-->`
	`</head>`
	`<body>`
	`<table style="table-layout: fixed; width: 100%;">{table}</table>`
	`</body>`
	`</html>`
	`;

	`const base64 = (s) => {`
	`const encoder = new TextEncoder();`
	`const data = encoder.encode(s);`
	`return btoa(String.fromCharCode(...data));`
	`};`

	`return (table, name) => {`
	`const ctx = { worksheet: name, table };`
	`const url = uri + base64(format(template, ctx));`

	`// Firefox特殊处理`
	`if (navigator.userAgent.indexOf('Firefox') > -1) {`
	`window.location.href = url;`
	`} else {`
	`const aLink = document.createElement('a');`
	`aLink.href = url;`
	`aLink.download = name \|\| '';`
	`const event = new MouseEvent('click');`
	`aLink.dispatchEvent(event);`
	`}`
	`};`
	`})();`

实现原理：

javascript复制代码

	`// 文本处理`
	`function getTextHtml(val) {`
	return `<td style="text-align: center">${val}</td>`;
	`}`

	`// 多行文本处理`
	`function getTextHtmls(val) {`
	const textsHtml = val.map(item => `<div>${item}</div>`).join('');
	return `<td style="text-align: left">${textsHtml}</td>`;
	`}`

	`// 图片处理`
	`function getImageHtmls(val) {`
	`const imgsHtml = val.map(items =>`
	`<div><img src="${items.url}" width="100" height="100" loading="lazy" /></div>`
	`).join('');`
	return `<td style="text-align: center; vertical-align: top;">${imgsHtml}</td>`;
	`}`

支持的数据类型：

javascript复制代码

	`export const table2excelNew = (...options) => {`
	`// 解析参数`
	`const { column, data, excelName, captionName } = resolveOptions(options);`

	`// 生成表格结构`
	let table = captionName ? `<caption>${captionName}</caption>` : '';
	`table += column.reduce((html, col) =>`
	html + `<th>${col.title}</th>`, ''
	, `<thead><tr>`);
	table += `</thead>`;

	`table += data.reduce((html, row) =>`
	`html + column.reduce((tr, col) =>`
	`tr + (typeMap[col.type \|\| 'text'](row[col.key])), ''`
	, `<tr>`
	) + `</tr>`
	, `<tbody>`);
	table += `</tbody>`;

	`// 执行导出`
	`exportToExcel(table, excelName);`
	`};`

javascript复制代码

	`// 定义列配置`
	`const columns = [`
	`{ title: '姓名', key: 'name', type: 'text' },`
	`{ title: '年龄', key: 'age', type: 'text' },`
	`{ title: '照片', key: 'avatar', type: 'images' },`
	`{ title: '备注', key: 'remark', type: 'texts' }`
	`];`

	`// 模拟数据`
	`const data = [`
	`{`
	`name: '张三',`
	`age: 25,`
	`avatar: [{ url: 'avatar1.jpg' }],`
	`remark: ['优秀员工', '技术骨干']`
	`},`
	`{`
	`name: '李四',`
	`age: 30,`
	`avatar: [{ url: 'avatar2.jpg' }, { url: 'avatar3.jpg' }],`
	`remark: ['团队领导']`
	`}`
	`];`

	`// 执行导出`
	`table2excelNew(`
	`columns,`
	`data,`
	`'员工信息表',`
	`'员工数据导出'`
	`);`