前端将页面（HTML页面）转化为图片（base64），同时下载到本地

话不多说，直接上代码。

 

//首先下载插件

npm install dom-to-image

 

// 将html页面内容转化为png图片引入的dom-to-image

import domtoimage from 'dom-to-image';

 

 

var node = document.getElementById('table');

// 先用domtoimage获取到HTML转化后图片后，已base64方式保存

domtoimage.toPng(node)

.then(function (dataUrl) {

var img = new Image();

img.src = dataUrl;

// 将获取到的base64下载下来

var imgUrl = img.src;

 

if (window.navigator.msSaveOrOpenBlob) {

var bstr = atob(imgUrl.split(',')[1]);

var n = bstr.length;

var u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

var blob = new Blob([u8arr]);

window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png');

} else {

// 这里就按照chrome等新版浏览器来处理

const a = document.createElement('a');

a.href = imgUrl;

a.setAttribute('download', 'chart-download');

a.click();

}

});