vue使用html2canvas实现截图某区域

使用html2canvas实现页面截图某区域

安装
javascript 复制代码
npm install html2canvas
页面使用
引入
javascript 复制代码
import html2canvas from 'html2canvas';
实现截图
javascript 复制代码
<template>
  截图
  <div ref="captureArea" class="capture-area">
    <!-- 这是你想要截图的区域 -->
    <p>这个区域将会被截图。</p>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
  <button @click="takeScreenshot">截图</button>
  <img v-if="screenshot" :src="screenshot" alt="Screenshot" />
</template>
<script setup lang="ts">
import { ref } from "vue";
import html2canvas from 'html2canvas';

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const captureArea: any = ref(null);

const screenshot: any = ref(null);

const takeScreenshot = async () => {
  // 使用 html2canvas 截图
  const canvas = await html2canvas(captureArea.value);
  screenshot.value = canvas.toDataURL('image/png');
}

</script>

<style>
.capture-area {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}
</style>
相关推荐
Amy.Wang1 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼4 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿6 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再8 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55512 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录17 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000018 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl19 分钟前
深度剖析Kafka读写机制
前端
FogLetter20 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css