vue使用html2canvas进行页面截图
Others 2019-09-25 03:21:44 2019-09-25 03:21:44 3632 次浏览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
Links: 397