前端将页面（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(); } });