前端将页面(HTML页面)转化为图片(base64),同时下载到本地
2021-08-01 08:56
标签:const set div get table tor The 本地 tab 话不多说,直接上代码。 //首先下载插件 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(); } }); 前端将页面(HTML页面)转化为图片(base64),同时下载到本地标签:const set div get table tor The 本地 tab 原文地址:https://www.cnblogs.com/jackandrose/p/14920034.html
上一篇:Java实现装饰者模式
下一篇:HTTP请求方法及响应状态码详解
文章标题:前端将页面(HTML页面)转化为图片(base64),同时下载到本地
文章链接:http://soscw.com/index.php/essay/107091.html