vue使用html2canvas实现移动端H5页面截图

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。

点击查看：官方文档

点击查看：线上demo

安装引用html2canvas

npm install html2canvas
 
import html2canvas from 'html2canvas';

实现代码

<template>
  <div id="pageDiv" :style="{'padding-top':isWeiXin || isApps?'0':'3rem'}">
 
    <!-- 页面头部-->
    <header-com :poptitle="'html2canvas截图'" :type="'doc_title'" v-if="!isWeiXin && !isApps"></header-com>
    <!-- 页面的主要内容 -->
    <section class="content">
      <div class="qr-code-box" ref="imageToFile">
        <vue-qr :logoSrc="config.logo" :text="config.value" class="qr-code-pic" :correctLevel="3" :margin="0" :dotScale="0.5"></vue-qr>
        <p>哈哈哈</p>
        <button type="button" class="shot-btn" @click="screenShot">截图</button>
        <img id="new_img" :src="img" v-if="img"/>
      </div>
    </section>
  </div>
</template>
<script>
import HeaderCom from "@/components/header"; //页面头部
import {changeUrl} from "@/utils/changeUrl"
import VueQr from 'vue-qr'; //二维码插件
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      isWeiXin: TS_WEB.isWeiXin,
      isApps: TS_WEB.isApp,
      config: {
        value: '',
        logo: require('@/statics/images/system/sjbj.jpg')
      },
      img: ""
    };
  },
  components: {
    HeaderCom,
    VueQr,
    html2canvas
  },
  methods: {
    changeUrl,
    screenShot() {
      html2canvas(this.$refs.imageToFile, {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      }).then((canvas) => {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        this.img = canvas.toDataURL('image/png');
      })
    }
  },
  mounted(){
    this.config.value = "https://www.baidu.com/";
  },
  created() {
    document.title='html2canvas截图'
  }
};
</script>
 
<style lang="less" scoped>
// 盒子模型
#pageDiv {
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  .content{
    height: 100%;
    width: 100%;
    overflow: scroll;
    overflow-x: hidden;
    .qr-code-box{
      width: 100%;
      height: 100%;
      #new_img{
        width: 100%;
        display: block;
      }
    }
  }
}
</style>

html2canvas可用的不同配置选项：http://html2canvas.hertzen.com/configuration/

结果：