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>
相关推荐
一抓掉一大把1 分钟前
elementui日历显示红点及根据日程范围判断是否有红点
前端·javascript·elementui
前端.火鸡1 分钟前
使用wavesurferJs实现录音音波效果
开发语言·前端·javascript
Sahas10193 分钟前
vite+vue2+elementui构建之 vite.config.js
vue.js·elementui
anyup9 分钟前
借助 Trae 从 0 到 1 实现海外地图渲染(leaflet + OSM)
前端·数据可视化·trae
六边形66612 分钟前
JavaScript 中本地对象、内置对象、宿主对象的区别与作用
前端·javascript
snakeshe101017 分钟前
深入解析React Hooks:useState与useReducer的区别与实现
前端
程序员韩立20 分钟前
现代全栈开发:Next.js与Node.js实战指南
前端·后端
航Hang*23 分钟前
WEBSTORM前端 —— 第2章:CSS —— 第2节:文字控制属性与CSS特性
前端·css·css3·html5·webstorm
小桥风满袖26 分钟前
Three.js-硬要自学系列18 (模型边界线、几何体顶点颜色、网格模型颜色渐变)
前端·css·three.js
JHC00000026 分钟前
DrissionPage 请求一次换一个代理(不重启chrome)
前端·chrome