vue使用html2canvas进行页面截图

Installnpm install html2canvasUseimport html2canvas from 'html2canvas';html<div id="faultTree" ref="faultTree":style="{width: '100%', height:

microcosm1994

8019人浏览 · 2018-11-27 11:32:08

microcosm1994 · 2018-11-27 11:32:08 发布

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
 })