前端将页面(HTML页面)转化为图片(base64),同时下载到本地

2021-08-01 08:56

阅读:542

标签: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


评论


亲,登录后才可以留言!