vue-element使用html2canvas实现网页指定区域（指定dom元素）截图

最新推荐文章于 2024-05-09 09:12:09 发布

高桥留

最新推荐文章于 2024-05-09 09:12:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：常见框架bug修改文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/everMrzhong/article/details/134848232

常见框架bug修改专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用HTML2Canvas库实现动态元素的截图，特别提到了处理涉及v-if或v-show条件渲染的DOM元素时，需在nextTick回调中调用截图方法以确保正确获取元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

<template>
  <el-dialog :visible.sync="printDialogVisible" width="1000px" :close-on-click-modal="false" append-to-body>
    <template>
      <div :id="print_content" ref="print_content">
        <slot />
      </div>
    </template>
    </div>
  </el-dialog>
</template>

<script>
  methods: {
    show() {
      this.printDialogVisible = true
      this.$nextTick(() => {
        this.saveImageNew()
      })
    },
  	saveImageNew() {
      let tabName = document.getElementById('print_content');
      // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas")
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      // imageTofile是给截图范围内的父级元素自定义的ref名称
      let canvasBox = tabName
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width)
      const height = parseInt(window.getComputedStyle(canvasBox).height)
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2
      canvas.height = height * 2
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      const context = canvas.getContext("2d");
      context.scale(2, 2);
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
      }
      html2canvas(canvasBox, options).then((canvas) => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png")
        console.log(dataURL)
      })
    },
  }
</script>