vue页面保存为图片

最新推荐文章于 2024-07-18 11:37:24 发布

呦写Bug呢_？

最新推荐文章于 2024-07-18 11:37:24 发布

阅读量1.5k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/Lclghjk/article/details/109315647

版权

做项目遇到这么一个场景，需要将整个页面或部分页面内容保存为图片并下载到本地
在这里可以使用第三方插件html2canvas
具体使用方法如下

1.引入插件

npm install --save html2canvas
或
yarn add html2canvas

2.引用插件

在需要的组件中引用
import html2canvas from "html2canvas"

3.使用

在需要保存为图片的内容最外层父元素打上ref标记，代表此部分内容需要保存为图片。

  <div id="canvasToPic" ref="canvasToPic">
  <!--xxxxxxxxxx页面内容-->
  </div>

然后调用html2canvas方法

      window.scrollTo(0,0)
      html2canvas(this.$refs.canvasToPic).then(canvas => {
        //回调中返回的其实就是一个canvas对象
        //可以使用canvas的toDataURL方法生成图片链接
        //url就是生成的链接可直接写入image标签的src中展示
        this.url= canvas.toDataURL("image/png");
       });

这里只是拿到了生成的图片url，如果要下载可以利用a标签的特性，动态创建a标签然后模拟点击下载

      html2canvas(this.$refs.canvasToPic).then(canvas => {
        //回调中返回的其实就是一个canvas对象
        //可以使用canvas的toDataURL方法生成图片链接
        //url就是生成的链接可直接写入image标签的src中展示
        this.url= canvas.toDataURL("image/png");
        // 创建一个a标签
        var link= document.createElement("a");
        //将生成的图片url赋值给a标签的href属性
        link.href = this.url; 
        //设置下载的文件名
        link.download = "页面截图";
        // 将a标签插入dom中
        document.body.appendChild(link);
        //模拟点击事件触发下载
        link.click();
        // 完成之后销毁创建的a标签
        document.body.removeChild(link);
      });

这样就完成了将页面保存为图片的全部过程，不过保存的图片，默认背景色为白色，可以设置backgroundColor属性进行修改

      html2canvas(this.$refs.canvasToPic,{
        backgroundColor:'red'
      }).then(canvas => {
        //回调中返回的其实就是一个canvas对象
        //可以使用canvas的toDataURL方法生成图片链接
        //url就是生成的链接可直接写入image标签的src中展示
        this.url= canvas.toDataURL("image/png");
        // 创建一个a标签
        var link= document.createElement("a");
        //将生成的图片url赋值给a标签的href属性
        link.href = this.url; 
        //设置下载的文件名
        link.download = "页面截图";
        // 将a标签插入dom中
        document.body.appendChild(link);
        //模拟点击事件触发下载
        link.click();
        // 完成之后销毁创建的a标签
        document.body.removeChild(link);
      });