JS导出图片和数据到Excel前端使用纯JS将数据和图片导出到excel export2Excel(tHeader, t

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>导出图片和数据到Excel</title>
	</head>
	<body></body>
	<script src="js/export2Excel.js"></script>
	<script>
		// tHeader和tbody的数据需要一一对应
		let tHeader = ['鲜花', '颜色', '图片']
		let tbody = [{
				name: '玫瑰花',
				color: '红色',
				pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2801998497,4036145562&fm=27&gp=0.jpg'
			},
			{
				name: '菊花',
				color: '黄色',
				pic: 'https://img2020.cnblogs.com/blog/1742906/202105/1742906-20210514231342257-1073217931.jpg'
			},
			{
				name: '牵牛花',
				color: '紫色',
				pic: 'https://img2020.cnblogs.com/blog/1742906/202105/1742906-20210514231502756-707130600.jpg'
			},
			{
				name: '梅花',
				color: '白色',
				pic: 'https://img2020.cnblogs.com/blog/1742906/202105/1742906-20210514231510233-31637764.jpg'
			},
			{
				name: '桃花花',
				color: '粉色',
				pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=602076004,4209938077&fm=27&gp=0.jpg'
			}
		]
		const export2Excel = (theadData, tbodyData, dataname) => {
			let re = /http/ // 字符串中包含http,则默认为图片地址
			let th_len = theadData.length // 表头的长度
			let tb_len = tbodyData.length // 记录条数
			let width = 60 // 设置图片大小
			let height = 60

			// 添加表头信息
			let thead = '<thead><tr>'
			for (let i = 0; i < th_len; i++) {
				thead += '<th>' + theadData[i] + '</th>'
			}
			thead += '</tr></thead>'

			// 添加每一行数据
			let tbody = '<tbody>'
			for (let i = 0; i < tb_len; i++) {
				tbody += '<tr>'
				let row = tbodyData[i] // 获取每一行数据

				for (let key in row) {
					if (re.test(row[key])) {
						// 如果为图片，则需要加div包住图片
						tbody +=
							'<td style="width:' +
							width +
							'px; height:' +
							height +
							'px; text-align: center; vertical-align: middle"><div style="display:inline"><img src=\'' +
							row[key] +
							"' " +
							' ' +
							'width=' +
							'"' +
							width +
							'"' +
							' ' +
							'height=' +
							'"' +
							height +
							'"' +
							'></div></td>'
					} else {
						tbody += '<td style="text-align:center">' + row[key] + '</td>'
					}
				}
				tbody += '</tr>'
			}
			tbody += '</tbody>'

			let table = thead + tbody

			// 导出表格
			exportToExcel(table, dataname)
		}

		export2Excel(tHeader, tbody, '我爱花朵')
	</script>
</html>

export2Excel.js

/* eslint-disable */
let idTmr
const getExplorer = () => {
	let explorer = window.navigator.userAgent
	//ie
	if (explorer.indexOf('MSIE') >= 0) {
		return 'ie'
	}
	//firefox
	else if (explorer.indexOf('Firefox') >= 0) {
		return 'Firefox'
	}
	//Chrome
	else if (explorer.indexOf('Chrome') >= 0) {
		return 'Chrome'
	}
	//Opera
	else if (explorer.indexOf('Opera') >= 0) {
		return 'Opera'
	}
	//Safari
	else if (explorer.indexOf('Safari') >= 0) {
		return 'Safari'
	}
}
// 判断浏览器是否为IE
const exportToExcel = (data, name) => {
	// 判断是否为IE
	if (getExplorer() == 'ie') {
		tableToIE(data, name)
	} else {
		tableToNotIE(data, name)
	}
}

const Cleanup = () => {
	window.clearInterval(idTmr)
}

// ie浏览器下执行
const tableToIE = (data, name) => {
	let curTbl = data
	let oXL = new ActiveXObject('Excel.Application')

	//创建AX对象excel
	let oWB = oXL.Workbooks.Add()
	//获取workbook对象
	let xlsheet = oWB.Worksheets(1)
	//激活当前sheet
	let sel = document.body.createTextRange()
	sel.moveToElementText(curTbl)
	//把表格中的内容移到TextRange中
	sel.select
	//全选TextRange中内容
	sel.execCommand('Copy')
	//复制TextRange中内容
	xlsheet.Paste()
	//粘贴到活动的EXCEL中

	oXL.Visible = true
	//设置excel可见属性

	try {
		let fname = oXL.Application.GetSaveAsFilename(
			'Excel.xls',
			'Excel Spreadsheets (*.xls), *.xls'
		)
	} catch (e) {
		print('Nested catch caught ' + e)
	} finally {
		oWB.SaveAs(fname)

		oWB.Close((savechanges = false))
		//xls.visible = false;
		oXL.Quit()
		oXL = null
		// 结束excel进程，退出完成
		window.setInterval('Cleanup();', 1)
		idTmr = window.setInterval('Cleanup();', 1)
	}
}

// 非ie浏览器下执行
const tableToNotIE = (function() {
	// 编码要用utf-8不然默认gbk会出现中文乱码
	let uri = 'data:application/vnd.ms-excel;base64,',
		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>{table}</table></body></html>',
		base64 = function(s) {
			return window.btoa(unescape(encodeURIComponent(s)))
		},
		format = (s, c) => {
			return s.replace(/{(\w+)}/g, (m, p) => {
				return c[p]
			})
		}
	return (table, name) => {
		let ctx = {
			worksheet: name,
			table
		}

		//创建下载
		let link = document.createElement('a')
		link.setAttribute('href', uri + base64(format(template, ctx)))

		link.setAttribute('download', name)

		// window.location.href = uri + base64(format(template, ctx))
		link.click()
	}
})()

JS导出图片和数据到Excel

index.html

export2Excel.js

导出excel

查看excel