使用js将网页导出为图片并下载

最新推荐文章于 2025-04-12 21:33:03 发布

修罗玉星恒

最新推荐文章于 2025-04-12 21:33:03 发布

阅读量3.9k

点赞数 3

文章标签： html2canvas FileSaver.js 网页截图图片下载前端开发

本文链接：https://blog.csdn.net/weixin_49408113/article/details/124411116

版权

项目场景：

例如：项目场景：将整个网页或者网页中的一部分导出成图片并下载到电脑客户端

下载FileSaver.js链接地址

解决方案：

 <div id="capture"></div>
 //此id用来标记需要导出的页面所在的位置，放在<body>标签中即表示导出整个页面
 <button type="button" name="button" onclick="convert()">
     开始生成
 </button>

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<!--引入需要的js文件-->
<script type="text/javascript">
    //开始转换
    function convert() {
      html2canvas(document.querySelector("#capture")).then(canvas => {
      //将canvas内容保存为文件并下载
      canvas.toBlob(function(blob) {
          saveAs(blob, "图片名称.png");
          });
      });
    }
</script>