vue使用html2canvas进行页面截图

最新推荐文章于 2024-07-31 18:04:09 发布

microcosm1994

最新推荐文章于 2024-07-31 18:04:09 发布

阅读量7.8k

点赞数

分类专栏： javascript vue

本文链接：https://blog.csdn.net/qq_39081974/article/details/84563115

版权

javascript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

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