由于项目开发需求,需要将表格数据以图片形式下载到本地,之前有了解到ExportPrint.js插件,可以将页面元素以图片形式下载导出,但此方法只适用于出现纵向滚动轴的页面,当有横向滚动轴时页面只会截取可视区域内容。借助网友的智慧(js截取页面内容、生成png(包括非可视区域)、下载到本地)实现了包含非可视区域内容的图片导出下载,方法如下:
一、HTML
// table内容为导出元素,该功能是用bootstrap-table动态生成表格,表格具体实现方法暂不写
// 请注意:一定要用position:absolute 目的是将页面元素 脱离文档流,目标是可截取非可视区域的内容
<div class="tableArea">
<table class="table table-striped Table" id="Table" style="position: absolute;"></table>
</div>
二、CSS
/*由于canvas画布必须要有背景色,所以这里给单元格添加背景色,不然导出的表格图片为透明背景字体展示不清晰 */
<style type="text/css">
table thead tr th,
table tbody td {
background:#ffffff
}
</style>
三、JS
//等表格元素加载完成之后再执行图片下载,故写了0.2s的延迟
//图片下载
setTimeout(function () {
html2canvas_2();
},200);
function html2canvas_2() {
//获取截取区域的高度和宽度
var TargetNode = document.querySelector("#Table");
var h = $(TargetNode).height();
var w = $(TargetNode).width();
//设置 canvas 画布的宽高 是容器搞度 2倍、为了是图片清晰
/**1.创建画布
* 2.设置canvas 大小
* */
var canvas = document.createElement("canvas");
//这是画布整体的大小
canvas.width = w * 2;
canvas.height = h * 2;
//这是绘画范围的大小
canvas.style.width = w + "px";
canvas.style.height = h + "px";
canvas.style.color = "chartreuse"
//画布缩小,将图片发大两倍
var context = canvas.getContext("2d")
context.scale(2,2)
// 再说一次 要截取全部,必须要脱离文档流 position: absolute; 否则只能截取到看到的部分。
html2canvas($("#Table"), {
allowTaint: true,
taintTest: false,
// canvas: canvas,
onrendered: function(canvas) {
// 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);
var _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
// png 替换 mime type 为了下载
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
/**
* 在本地进行文件保存
* {String} data 要保存到本地的图片数据
* {String} filename 文件名
*/
var saveFile = function(data, filename) {
//创建一个命名空间。是 a 标签
var save_link =document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
// 下载后的问题名
var filename = '推送数据' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData, filename);
}
})
}
四、页面效果
(1)给单元格添加背景颜色
(2)只给tbody单元格添加背景颜色
五、补充
现将ExportPrint.js的使用方法也补充如下:
//导出图片
ExportPrint("导出按钮id", "print", "导出元素id选择器", "导出图片名称");
ExportPrint.js
//文件下载
function downloadFile(fileName, content) {
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
//根据不同的浏览器使用相应的方式来创建异步对象aaaaaaaa
function createXmlHttp() {
xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); //iemsxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //iemsxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != "undefined") //Firefox、Opera 8.0+,Safari,谷歌浏览器
{
xhobj = new XMLHttpRequest();
}
return xhobj;
}
function ExportPrint(ExportBtn,PirntBtn,DataAreaName,EnportPngName) {
//图标打印
$("#" + PirntBtn).on("click", function (event) {
event.preventDefault();
html2canvas(document.getElementById(DataAreaName), {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
canvas.id = "printcanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
/* document.body.appendChild(newImg); */
/* window.open(newImg.src); */
var printWindow = window.open(newImg.src);
// printWindow.document.write();
printWindow.document.write('<img src="' + newImg.src + '" />')
printWindow.print();
}
});
});
// 加工image data,替换mime type 图标下砸
$("#" + ExportBtn).on("click", function (event) {
event.preventDefault();
html2canvas(document.getElementById(DataAreaName), {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var type = 'png';
var dataUrl = canvas.toDataURL(type);
var imgData = dataUrl.replace(_fixType(type), 'image/octet-stream');
saveFile(imgData, EnportPngName+'.png');
}
});
});
var _fixType = function (type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
var saveFile = function (data, filename) {
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
}