vue 使用Html2Canvas对元素截图 下载

本文主要是介绍vue 使用Html2Canvas对元素截图 下载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

介绍

官网：https://html2canvas.hertzen.com/

一款轻量化的网页截图工具，可以对元素截图下载，只有几十KB，很强大，例如程序发送错误，就可以调用方法继续截图，或者用户在干什么都可以继续记录。

安装

npm install --save html2canvas

导入

import html2canvas from "html2canvas";

定义截图的元素

<div ref="test">
<!--在该div里的内容都会给截图-->
</div>

截图

  html2canvas(this.$refs.test, {}).then((canvas) => {const link = document.createElement("a"); // 创建一个超链接对象实例link.download = "meizfeiyi.jpg"; // 设置要下载的图片的名称link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中link.click(); // 触发超链接的点击事件});

如果需要上传到服务端自行编写即可

这篇关于vue 使用Html2Canvas对元素截图 下载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---