vue使用html2canvas进行页面截图

Install

npm install html2canvas



Use

import html2canvas from 'html2canvas';



html

<!-- 截图区域 -->

<div id="faultTree" ref="faultTree"  :style="{width: '100%', height: height + 'px'}"></div>

<!-- 显示图片区域 -->

<img style="width: 100%;height: 300px;" class="real_pic" :src="dataURL" />



js

// methods

let self = this

let ref = this.$refs.faultTree // 截图区域

 this.$html2canvas(ref, {

      backgroundColor: '#142E48'

 }).then((canvas) => {

      let dataURL = canvas.toDataURL("image/png")

      self.dataURL = dataURL