前端將頁面（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();

}

});