前端 导出为Excel 数据源为table表格 并且table中含有图片
Posted guxingy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 导出为Excel 数据源为table表格 并且table中含有图片相关的知识，希望对你有一定的参考价值。
图片导出到Excel，图片的路径得调整一下，
把
<img src="1.jpg" id="img1" />
改为：
<img src="http://localhost:2079/%E6%B5%8B%E8%AF%951/1.jpg" />
这样Excel导出的时候就能包含图片了，但不是完美的解决方案。
导出注意事项：
- 图片并不是实实在在存入Excel中的，应该仅仅只是存的图片路径
- 图片的src地址必须是完整的，需要包含http这些，路径是全的
- wps打开Excel应该有缓存这些图片，所以即使把服务器关闭了，不能访问图片了，wps依然能展示图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table id="targetTable">
<thead>
<tr>
<td>序号</td>
<td>图片</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="1.jpg" id="img1" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="http://localhost:2079/%E6%B5%8B%E8%AF%951/1.jpg" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="http://localhost:2079/%E6%B5%8B%E8%AF%951/3.jpg" style="width: 200px;" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<img src="http://183.66.231.18:8084/Content/img/log.png" style="width: 100px;" />
</td>
</tr>
</tbody>
</table>
<a id="exportExcel" href="javascript:;">导出Excel</a>
<input type="button" id="btn1" value="btn1" />
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>
//https://github.com/smileyby/js-table-excel
/**
* 将html的table转成Excel的data协议类型数据，不支持ie
* table 是HTML DOM Document 对象
× name 是sheet的名称
*/
var tableToExcel = (function () {
var 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 http-equiv="Content-type" content="text/html;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 = function (s, c) {
return s.replace(/{(w+)}/g, function (m, p) {
return c[p];
})
};
return function (table, name) {
var ctx = {
worksheet: name || ‘Worksheet‘,
table: table.innerHTML
}
return uri + base64(format(template, ctx));
}
})();
$(function () {
$(‘#exportExcel‘).on(‘click‘, function () {
var $this = $(this);
//设定下载的文件名及后缀
$this.attr(‘download‘, ‘excelName.xls‘);
//设定下载内容
$this.attr(‘href‘, tableToExcel($(‘#targetTable‘)[0], ‘excelName‘));
});
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}
$("#btn1").click(function () {
var src = "1.jpg";
var image = new Image();
image.src = src;
image.onload = function () {
var base64 = getBase64Image(image);
console.log(base64);
$("#img1").attr("src", base64);
}
});
});
</script>
</body>
</html>
以上是关于前端 导出为Excel 数据源为table表格 并且table中含有图片的主要内容，如果未能解决你的问题，请参考以下文章