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>
相关推荐
伟笑14 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~33 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士33 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢34 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子42 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪42 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon1 小时前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子1 小时前
深入解析CSRF攻击
前端·安全·面试
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构