使用html2canvas将页面转为图片并下载

插件介绍

直接引用官网上的介绍为

该脚本允许您直接在用户浏览器上拍摄网页或其中一部分的“屏幕截图”。屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图

官网地址：http://html2canvas.hertzen.com/

使用

1、下载插件

npm i -S html2canvas

2、文件中引入插件

import html2canvas from ‘html2canvas’;

3、使用方法

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

4、实际在vue中使用效果

为了方便使用，可以直接提取为组件，传参的参数为当前所要转为图片的dom的id或者类名，完整代码如下：

<template>
  <div class="canvas-load-img" @click="loadImg" ref="canvasLoadImg">
    点击下载
  </div>
</template>

<script>
// 引入html2canvas
import html2canvas from 'html2canvas';

export default {
  // 导出图片组件
  name: 'CanvasLoadImg',
  props: {
    // 需要导出图片的选择器名称，不传则默认导出整个body
    selector: {
      type: String,
      default: 'body'
    }
  },
  methods: {
    async loadImg() {
      // 获取到当前页面滚动距离，纵向y，横向x
      const y = window.pageYOffset || document.documentElement.scrollTop
      || document.body.scrollTop || 0;
      const x = window.pageXOffset || document.documentElement.scrollLeft
      || document.body.scrollLeft || 0;
      // 获取到当前需要转为图片的dom
      const dom = document.querySelector(this.selector);
      const canvas = await html2canvas(dom,
        {
          scrollY: -y,
          scrollX: -x,
          width: dom.clientWidth, // dom 原始宽度
          height: dom.clientHeight
        });
      canvas.scrollY = 0;
      canvas.y = 0;
      const url = canvas.toDataURL('image/png'); // 方法返回一个包含图片展示的 data URI 
      const a = document.createElement('a'); // 生成一个a元素
      const event = new MouseEvent('click'); // 创建一个单击事件
      a.download = 'photo'; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    }
  }
};
</script>

<style scoped>
.canvas-load-img{
  line-height: 16px;
  cursor: pointer;
}
</style>

5、页面调用组件

<v-load-img selector="#company" />

6、注意事项

selector参数传参时需要注意，类名带上 ‘.’ ，id名带上‘#’

7、问题解决

在实际使用中，发现在页面有滚动条时，并且下载图片时页面已经有滚动距离，下载的图片是不完整的，解决方法为获取到当前页面的滚动距离，调用html2canvas时传参scrollX、scrollY，即可解决，上方组件代码已经解决此问题