html2Canvas截图并保存
printStatistics() {
this.exportLoading = true;
setTimeout(() => {
let content_html = document.getElementById(this.printId); //要转化的div
let width = content_html.offsetWidth;
let height = content_html.offsetHeight;
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
let scaleBy = Math.ceil(window.devicePixelRatio);
canvas.width = width * scaleBy;
canvas.height = (height) * scaleBy;
context.scale(scaleBy, scaleBy);
let opts = {
allowTaint: true,//允许加载跨域的图片
taintTest: true, //检测每张图片都已经加载完成
scale: scaleBy, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关,发布的时候记得改成false
width: width, //dom 原始宽度
height: height //dom 原始高度
};
this.exportLoading = false;
html2canvas(content_html, opts).then((canvas) => {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
const imgUrl = canvas.toDataURL(), $a = document.createElement('a'),
time = dateFtt('yyyy_MM_dd', new Date()),
event = document.createEvent('MouseEvents');
if (window.navigator.msSaveOrOpenBlob) {
let bstr = atob(imgUrl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
let blob = new Blob([u8arr]);
window.navigator.msSaveOrOpenBlob(blob, this.category + time + '.png')
} else {
$a.setAttribute('download', this.category + time + '.png');
$a.setAttribute('target', '_blank');
$a.setAttribute('href', imgUrl);
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
$a.dispatchEvent(event);
}
});
}, 800);
},
后台返回excel数据流前端实现保存
//excel 数据流
let $a = document.createElement('a'), startBase, endBase;
if (this.exportData.startTime && this.exportData.endTime) {
startBase = new Date(this.exportData.startTime);
endBase = new Date(this.exportData.endTime);
} else {
let base = new Date();
let year = base.getFullYear(), month = base.getMonth() + 1, date = base.getDate();
base = new Date(`${year}/${month}/${date} 00:00:00`);
startBase = new Date(base.getTime() - 3600 * 1000 * 24 * 365);
endBase = new Date(base.getTime());
}
startBase = dateFtt('yyyyMMdd', startBase);
endBase = dateFtt('yyyyMMdd', endBase);
res = new Blob([res.data], {type: 'application/vnd.ms-excel'});
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(res, startBase + '-' + endBase + '_日志报表.xlsx')
} else {
let href = URL.createObjectURL(res), event = document.createEvent('MouseEvents');
$a.setAttribute('download', startBase + '-' + endBase + '_日志报表.xlsx');
$a.setAttribute('target', '_blank');
$a.setAttribute('href', href);
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
$a.dispatchEvent(event);
URL.revokeObjectURL(href);//记得释放
}