个人网站建设免费主机,安徽建设厅城乡官网,中铁招标在哪个平台,电子报 网站开发今天是一个发文的好日子#x1f600;~
#x1f447;#x1f447;#x1f447;
一个需求#xff0c;要截取页面中的内容并截图保存#xff0c;来看一看我是怎么实现的吧#xff1a;
这里需要使用到插件--html2canvas
1.安装并引入html2canvas
npm install html2canv…今天是一个发文的好日子~ 一个需求要截取页面中的内容并截图保存来看一看我是怎么实现的吧
这里需要使用到插件--html2canvas
1.安装并引入html2canvas
npm install html2canvas
import html2canvasfrom html2canvas
也可以从这里找到相应的文件html2canvas.hertzen.com/dist/html2canvas.js
以便原生js引入
script typetext/javascript src.\html2canvas.js/script 2.创建下载按钮点击事件
1html2canvas方法来获取canvas对象其第一个参为对应的节点第二个是相关配置项。
2获取到canvas后用其toDataURL方法转换为url并提供a链接的href放链接与download文件名并添加到页面上来进行下载注意图片格式统一。
3想要自动下载可先将a链接藏起来并异步使用dispatchEvent触发其点击事件最后移除该a链接即可。
以上三步代码示例如下
let aimPart document.querySelector(.app);html2canvas(aimPart,{scale: 2,width: aimPart.offsetWidth,height: aimPart.offsetHeight,allowTaint: true, // 允许污染画布proxy: /imgProxy}).then((canvas) {let imgUrl canvas.toDataURL(image/png, 1);let downLoadLink document.createElement(a);downLoadLink.innerText 下载downLoadLink.download 铸剑山庄.png;downLoadLink.href imgUrl;downLoadLink.className downLoadLinkdownLoadLink.style.display none;// 下载图片aimPart.appendChild(downLoadLink)window.setTimeout(() {document.querySelector(.downLoadLink).dispatchEvent(new MouseEvent(click));aimPart.removeChild(document.querySelector(.downLoadLink))},500)})
之后便可以下载目标节点示例中aimPart的相应截图了~ 希望本文会对您有所帮助~ ^_^
