vue3 中html2canvas用法(屏幕截图)

原创

已于 2023-09-19 15:27:13 修改 · 3.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2023-09-19 15:26:18 首次发布

本文介绍了如何在Vue3项目中使用html2canvas库实现页面内容的截图，并转换为PDF下载，包括引入依赖、导入方式以及关键代码片段和文件下载方法。

前言

vue2和vue3用法大致相同，可以直接套用

步骤

1.引入依赖

npm i html2canvas

2.导入方式

import html2canvas from "html2canvas";

3.代码示例

// html
<el-button @click="generateImg">下载pdf</el-button>
<div>
  // 滑动状态也可全部截图
  <el-scrollbar>
    <div id="test-id">
        <img src="@img/admin_logo.jpg" alt="" />
        <div>
          <div>今天是个好天气</div>
          <div>测试截图中</div>
          <</