# html2canvas页面截图插件的使用

最新推荐文章于 2024-05-27 21:41:23 发布

Arrow_Yzw

最新推荐文章于 2024-05-27 21:41:23 发布

阅读量249

点赞数 2

分类专栏：前端问题总结文章标签： html js vue javascript css

本文链接：https://blog.csdn.net/YzwSfyyyy/article/details/110643449

版权

本文介绍了在vue项目中使用html2canvas插件进行页面截图的方法，包括安装、设置截图范围和使用示例。在实际应用中遇到highcharts图表因宽度自适应导致的截图问题，期待解决方案。

摘要由CSDN通过智能技术生成

最近在做公司的项目时有一个需求是将当前页面生成截图并发送邮件。so，看了html2canvas官方文档，百度了好几下，终于实现了页面截图。

用法：

因为我是在vue项目中使用，所以直接安装

// 设置截图区域 为截图区域的div设置ref
  <div class="show" ref="resultCanvas">
    <div id="one">
      //要截图部分的代码
    </div>
  </div>

1.定义截图方法名

<el-button type="primary" plain size="small" @click=" downloadResult()">生成截图</el-button>

2.methods：

        dataURLToBlob(dataurl){
   //ie 图片转格式
          var arr = dataurl.spl

关注

专栏目录