当前位置：首页 > news >正文

Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出设置页面大小及方向

news 来源：原创 2025/5/19 10:52:22

在 Vue 项目中实现导出 PDF 文件、调整文件页面大小和页面方向的功能，使用 html2canvas 将 HTML 内容转换为图片，再使用 jspdf 把图片添加到 PDF 文件中。以下是详细的实现步骤和代码示例：

步骤 1：安装依赖

首先，在项目中安装 html2canvas 和 jspdf：

npm install html2canvas jspdf

步骤 2：创建 Vue 组件

以下是一个完整的 Vue 组件示例，包含导出 PDF、调整页面大小和方向的功能：

<template><div><!-- 选择页面大小的下拉框 --><select v-model="selectedPageSize"><option value="a4">A4</option><option value="a3">A3</option><option value="letter">Letter</option></select><!-- 选择页面方向的下拉框 --><select v-model="selectedPageOrientation"><option value="portrait">纵向</option><option value="landscape">横向</option></select><!-- 导出 PDF 的按钮 --><button @click="exportToPDF">导出为 PDF</button><!-- 需要导出为 PDF 的内容区域 --><div id="contentToExport"><h1>这是要导出为 PDF 的内容</h1><p>可以在这里添加更多文本、图片、表格等元素。</p></div></div>
</template><script>
// 引入 html2canvas 用于将 HTML 元素转换为 canvas 图像
import html2canvas from 'html2canvas';
// 引入 jsPDF 用于创建和保存 PDF 文件
import jsPDF from 'jspdf';export default {data() {return {// 存储用户选择的页面大小，默认为 A4selectedPageSize: 'a4',// 存储用户选择的页面方向，默认为纵向selectedPageOrientation: 'portrait'};},methods: {async exportToPDF() {// 获取需要导出为 PDF 的 HTML 元素const element = document.getElementById('contentToExport');try {// 使用 html2canvas 将 HTML 元素转换为 canvas 图像const canvas = await html2canvas(element);// 将 canvas 图像转换为 base64 编码的 PNG 图片数据const imgData = canvas.toDataURL('image/png');// 根据用户选择的页面大小和方向创建 jsPDF 实例const pdf = new jsPDF({orientation: this.selectedPageOrientation, // 页面方向unit: 'mm', // 单位为毫米format: this.selectedPageSize // 页面大小});// 获取 PDF 页面的宽度和高度const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = pdf.internal.pageSize.getHeight();// 计算图像的宽度和高度，使图像按比例适应页面const imgWidth = pdfWidth;const imgHeight = (canvas.height * imgWidth) / canvas.width;let heightLeft = imgHeight;let position = 0;// 将图像添加到第一页 PDFpdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pdfHeight;// 如果图像高度超过一页，进行分页处理while (heightLeft >= 0) {position = heightLeft - imgHeight;pdf.addPage();pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pdfHeight;}// 保存 PDF 文件，文件名为 exported.pdfpdf.save('exported.pdf');} catch (error) {// 捕获并打印导出过程中可能出现的错误console.error('导出 PDF 时出错:', error);}}}
};
</script><style scoped>
/* 为需要导出的内容区域添加样式 */
#contentToExport {padding: 20px;border: 1px solid #ccc;margin-top: 20px;
}
</style>

代码解释

模板部分（<template>）：
- 两个 select 元素分别用于选择页面大小和页面方向，通过 v-model 指令绑定到组件的数据 selectedPageSize 和 selectedPageOrientation。
- 一个按钮，点击时触发 exportToPDF 方法进行 PDF 导出操作。
- 一个 div 元素，其 id 为 contentToExport，该元素内的内容将被导出为 PDF。
脚本部分（<script>）：
- data 函数返回两个数据项，分别存储用户选择的页面大小和页面方向。
- exportToPDF 方法是核心逻辑：
  - 使用 document.getElementById 获取要导出的 HTML 元素。
  - 调用 html2canvas 将 HTML 元素转换为 canvas 图像，并将其转换为 base64 编码的 PNG 图片数据。
  - 根据用户选择的页面大小和方向创建 jsPDF 实例。
  - 计算图像的宽度和高度，使其按比例适应页面。
  - 将图像添加到 PDF 中，如果图像高度超过一页，进行分页处理。
  - 最后使用 pdf.save 方法保存 PDF 文件。
样式部分（<style>）：
- 为 #contentToExport 元素添加了一些样式，使其在页面上有边框和内边距。

使用方法

将上述代码保存为一个 Vue 组件（例如 ExportPDF.vue），然后在其他组件中引入并使用：

<template><div><ExportPDF /></div>
</template><script>
import ExportPDF from './ExportPDF.vue';export default {components: {ExportPDF}
};
</script>

Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出设置页面大小及方向

在 Vue 项目中实现导出 PDF 文件、调整文件页面大小和页面方向的功能，使用 html2canvas 将 HTML 内容转换为图片，再使用 jspdf 把图片添加到 PDF 文件中。以下是详细的实现步骤和代码示例： 步骤 1：安装依赖首先，在项…...

编程日记 2025/5/19 10:52:22

LTV预估 | 深度学习PLTV之开山鼻祖ZILN

🤣 这一集让我们欢迎基于深度学习的pltv方法：ZILN，ZILN可以说是后面很多研究的参考方法，我看了好几篇最新的pltv论文，都是基于ZILN来做的。文章目录 1 精简总结2 背景&挑战：3 方法：实验&am…...

编程日记 2025/5/14 15:23:59

1，获取STATIC控件的值 CString str; m_STATIC2.GetWindowText(str);//获取STATIC控件的值 MessageBox(str); 2.设置EDIT控件的值 m_EDIT2.SetWindowText(str);//设置EDIT控件的值 GetDlgItem(IDC_EDIT1)->SetWindowText("Leave");//设置EDIT控件的值…...

编程日记 2025/5/14 11:19:46

第24篇基于ARM A9处理器用汇编语言实现中断＜六＞

Q：怎样设计ARM处理器汇编语言程序使用定时器中断实现实时时钟？ A：此前我们曾使用轮询定时器I/O的方式实现实时时钟，而在本实验中将采用定时器中断的方式。新增第三个中断源A9 Private Timer，对该定时器进行配置&#…...

编程日记 2025/5/14 8:59:08

【学习笔记】计算机网络（二）

第2章物理层文章目录第2章物理层2.1物理层的基本概念2.2 数据通信的基础知识2.2.1 数据通信系统的模型2.2.2 有关信道的几个基本概念2.2.3 信道的极限容量 2.3物理层下面的传输媒体2.3.1 导引型传输媒体2.3.2 非导引型传输媒体 2.4 信道复用技术2.4.1 频分复用、时分复用和…...

编程日记 2025/5/16 2:33:32

2025多目标优化创新路径汇总

多目标优化是当下非常热门且有前景的方向！作为AI领域的核心技术之一，其专注于解决多个相互冲突的目标的协同优化问题，核心理念是寻找一组“不完美但均衡”的“帕累托最优解”。在实际中，几乎处处都有它的身影。但随着需求场景的…...

编程日记 2025/5/13 0:04:37

图漾相机-ROS2-SDK-Ubuntu版本编译(新版本)

官网编译文档链接： https://doc.percipio.xyz/cam/latest/getstarted/sdk-ros2-compile.html 国内gitee下载SDK链接： https://gitee.com/percipioxyz 国外github下载SDK链接： https://github.com/percipioxyz 1.Camport ROS2 SDK 介绍 1.1 …...

编程日记 2025/5/18 18:03:39

字符设备驱动模版-中断

字符设备驱动模版-中断思维导图在线高清查看：https://www.helloimg.com/i/2025/01/27/679791b5257c0.png 修改设备树 1添加pinctrl节点 1创建对应的节点在 iomuxc 节点的 imx6ul-evk 子节点下 2添加“fsl,pins”属性 3在“fsl,pins”属性中添加PIN配置信息 …...

编程日记 2025/5/13 6:20:09

STM32 旋转编码器

旋转编码器简介旋转编码器：用来测量位置、速度或旋转方向的装置，当其旋转轴旋转时，其输出端可以输出与旋转速度和方向对应的方波信号，读取方波信号的频率和相位信息即可得知旋转轴的速度和方向类型：机械触点式/霍尔传…...

编程日记 2025/5/15 3:37:35

java ，springboot 对接支付宝支付，实现生成付款二维码，退款，查询订单状态等接口

查看文档支付宝文档地址： 小程序文档 - 支付宝文档中心使用沙箱环境沙箱登录地址登录 - 支付宝点击查看才能看钥匙截图写错了。。问号可以看默认加密方式点击沙箱帐号这里我们就具备所有条件了实战开始 pom文件增加依赖 <dependency> <gro…...

编程日记 2025/5/14 17:34:11

OpenCV：形态学梯度

目录简述 1. 用图像运算和腐蚀实现形态学梯度 1.1 代码示例 1.2 运行结果 2. 形态学梯度接口 2.1 参数解释 2.2 代码示例 2.3 运行结果 3. 形态学梯度与边缘检测 4. 形态学梯度的应用场景 5. 注意事项相关阅读 OpenCV：图像的腐蚀与膨胀-CSDN博客简述…...

编程日记 2025/5/17 17:40:44

图漾相机搭配VisionPro使用简易教程

1.下载并安装VisionPro软件请自行下载VisonPro软件。 VisionPro 9.0/9.5/9.6版本经测试，可正常打开图漾相机，建议使用图漾测试过的版本。 2.下载PercipioCameraForVisionPro软件包使用浏览器下载：https://gitee.com/percipioxyz/camport3…...

编程日记 2025/5/14 2:51:07

《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》重印P126、P131勘误

勘误：打圈的地方有指数二字。指数滤波器本身是错误的概念，我在书上打了一个叉，排版人员误删了。滤波器部分从根本上有问题，本来要改，但是时间不够了。和廖老师讨论多次后，决定大动。指数滤波器的概念…...

编程日记 2025/5/18 11:57:18

4、PyTorch 第一个神经网络，手写神经网络的基本部分组成

假设有一个二维数据集，目标是根据点的位置将它们分类到两个类别中（例如，红色和蓝色点）。以下实例展示了如何使用神经网络完成简单的二分类任务，为更复杂的任务奠定了基础，通过 PyTorch 的模块化接口&#…...

编程日记 2025/5/19 10:32:05

Vue实现div滚动，并且支持top动态滚动

如果你知道距离目标 div 顶部的像素值，并希望通过传入 top 参数来实现滚动到对应区域，可以使用 window.scrollTo 方法。编写滚动方法 const scrollToDiv (targetDiv, top) > {if (targetDiv) {top top * targetDiv.value.scrollHeight / data.he…...

编程日记 2025/5/19 10:30:41

【QT】- QUdpSocket

QUdpSocket 是 Qt 自带的一个类，属于 Qt 网络模块，用于进行 UDP（用户数据报协议） 通信。它提供了简便的接口来发送和接收 UDP 数据报（datagrams）。 UDP 是一种无连接的协议，适用于那些不需要确…...

编程日记 2025/5/6 19:51:34

WGCLOUD运维工具从入门到精通 - 如何设置主题背景

需要升级到WGCLOUD的v3.5.7或者以上版本，才会支持自定义设置主题背景色 WGCLOUD下载：www.wgstart.com 我们登录后，在右上角点击如下的小图标，就可以设置主题背景色了，包括：经典白（默认&#x…...

编程日记 2025/5/19 10:46:45

【Elasticsearch】中数据流需要配置索引模板吗？

是的，数据流需要配置索引模板。在Elasticsearch中，数据流（Data Streams）是一种用于处理时间序列数据的高级结构，它背后由多个隐藏的索引组成，这些索引被称为后备索引（Backing Indices&#xff0…...

编程日记 2025/5/8 0:18:44

Python 合并 Excel 单元格

合并 Excel 单元格是 Excel 数据处理和表格设计中的一项常用操作。例如，在制作表格标题时，经常会将多个单元格合并，使标题能够跨列显示，更加醒目和美观。此外，当对数据进行分类时，为了使同一类别的数据在视…...

编程日记 2025/5/13 5:08:15

C++中左值和右值的概念

文章目录一、概要二、左值（Lvalue）二、右值（Rvalue）三、左值引用和右值引用四、左值和右值的使用场景五、总结一、概要在 C 中，左值（Lvalue）和右值（Rvalue）是两个非常…...

编程日记 2025/5/17 1:58:15

27.日常算法

1. 最后一个单词的长度题目来源给你一个字符串 s，由若干单词组成，单词前后用一些空格字符隔开。返回字符串中最后一个单词的长度。单词是指仅由字母组成、不包含任何空格字符的最大子字符串。示例 1： 输入：s “Hello Wor…...

编程日记 2025/5/14 17:42:22

动态规划DP 数字三角形模型传纸条（题目分析+C++完整代码）

传纸条原题链接 AcWing 275. 传纸条题目描述小渊和小轩是好朋友也是同班同学，他们在一起总有谈不完的话题。一次素质拓展活动中，班上同学安排坐成一个 m行 n 列的矩阵，而小渊和小轩被安排在矩阵对角线的两端，因此&#x…...

编程日记 2025/5/18 16:31:32

Spark入门（Python）

目录一、安装Spark 二、Spark基本操作一、安装Spark pip3 install pyspark 二、Spark基本操作 # 导入spark的SparkContext,SparkConf模块 from pyspark import SparkContext, SparkConf # 导入os模块 import os # 设置PYSPARK的python环境 os.environ[PYSPARK_PYTHON] &…...

编程日记 2025/5/17 15:49:55

.NET Core缓存

目录缓存的概念客户端响应缓存 cache-control 服务器端响应缓存内存缓存（In-memory cache） 用法 GetOrCreateAsync 缓存过期时间策略缓存的过期时间解决方法： 两种过期时间策略： 绝对过期时间滑动过期时间两…...

编程日记 2025/5/17 18:47:35

IoTDB 2025 春节值班与祝福

2025 春节快乐瑞蛇迎吉庆，祥光映华年，2025 春节已近在眼前。社区祝福 IoTDB 的所有关注者、支持者、使用者 2025 新年快乐，“蛇”来运转！ IoTDB 团队的春节放假时间为 2025 年 1 月 27 日至 2 月 4 日，1 月 25 日、26…...

编程日记 2025/5/14 22:09:02

Qt Ribbon使用实例

采用SARibbon创建简单的ribbon界面实例代码如下所示： 1、头文件： #pragma once #include <SARibbonBar.h> #include "SARibbonMainWindow.h" class QTextEdit; class SAProjectDemo1 : public SARibbonMainWindow { Q_OBJECT pub…...

编程日记 2025/5/6 17:14:55

maven的打包插件如何使用

默认的情况下，当直接执行maven项目的编译命令时，对于结果来说是不打第三方包的，只有一个单独的代码jar，想要打一个包含其他资源的完整包就需要用到maven编译插件，使用时分以下几种情况第一种：当只是想单纯…...

编程日记 2025/5/18 5:21:39

Linux——rzsz工具

rzsz这个工具用于 windows 机器和远端的 Linux 机器通过 XShell 传输文件. 安装完毕之后可以通过拖拽的方式将文件上传过去. 安装rzsz工具 rz：从Windows机器上传到远程Linux机器（或者直接把文件托进Xshell中） sz：将文件从Linux远…...

编程日记 2025/5/8 5:21:42

航空客户价值的数据挖掘与分析（numpy+pandas+matplotlib+scikit-learn）

文章目录航空客户价值的数据挖掘与分析（numpy+pandas+matplotlib+scikit-learn）写在前面背景与挖掘目标1.1 需求背景1.2 挖掘目标1.3 项目概述项目分析方法规划2.1 RFM模型2.2 LRFMC模型指标2.3 分析总体流程图数据抽取探索及预处理3.1 数据抽取3.2 数据探索分析3.3 数据预处…...

编程日记 2025/5/15 10:45:28

【文星索引】搜索引擎项目测试报告

目录一、项目背景二、项目功能2.1 数据收集与索引2.2 API搜索功能2.3 用户体验与界面设计2.4 性能优化与维护三、测试报告3.1 功能测试3.2 界面测试3.3 性能测试3.4 兼容性测试3.5 自动化测试四、测试总结4.1 功能测试方面4.2 性能测试方面4.3 用户界面测试方面一、项目背…...

编程日记 2025/5/18 9:45:40

【C++】特殊类设计、单例模式与类型转换

目录一、设计一个类不能被拷贝 （一）C98 （二）C11 二、设计一个类只能在堆上创建对象 （一）将构造函数私有化，对外提供接口 （二）将析构函数私有化三、设计一个类只…...

编程日记 2025/5/15 19:57:18

Nxopen 直齿轮参数化设计

NXUG1953 Visualstudio 2019 参考论文： A Method for Determining the AGMA Tooth Form Factor from Equations for the Generated Tooth Root Fillet //FullGear// Mandatory UF Includes #include <uf.h> #include <uf_object_types.h>// Internal I…...

编程日记 2025/5/11 9:43:37

Vue.js组件开发-实现HTML内容打印

在Vue项目中实现打印功能，可以借助vue-html-to-paper插件来完成。步骤创建Vue项目：如果还没有Vue项目，可以使用Vue CLI来创建一个新的项目。 npm install -g vue/cli vue create vue-print-template cd vue-print-template安装vue-html-…...

编程日记 2025/5/18 7:08:28

大模型GUI系列论文阅读 DAY4续：《Large Language Model Agent for Fake News Detection》

摘要在当前的数字时代，在线平台上虚假信息的迅速传播对社会福祉、公众信任和民主进程构成了重大挑战，并影响着关键决策和公众舆论。为应对这些挑战，自动化假新闻检测机制的需求日益增长。预训练的大型语言模型（LLMs&#xff0…...

编程日记 2025/5/18 21:05:15

Day27-【13003】短文，线性表两种基本实现方式空间效率、时间效率比较？兼顾优点的静态链表是什么？如何融入空闲单元链表来解决问题？

文章目录本次内容总览第四节，两种基本实现方式概览两种基本实现方式的比较元素个数n大于多少时，使用顺序表存储的空间效率才会更高？时间效率比较？*、访问操作，也就是读运算，读操作1、插入，2、删…...

编程日记 2025/5/16 9:24:39

Scrapy如何设置iP,并实现IP重用, IP代理池重用

前置知识 1/3乐观锁 2/3 Scrapy流程(非全部) 3/3 关于付费代理我用的"快代理", 1000个ip, 每个ip1min的有效期, 你用的时候, 把你的链接, 用户名填上去就行设置代理IP 🔒 & 帮助文档: ①meta ②meta#proxy$ 语法: ①proxy的设置: Request对象中…...

编程日记 2025/5/14 4:35:41

动手学图神经网络（4）：利用图神经网络进行图分类

利用图神经网络进行图分类：从理论到实践引言在之前的学习中，大家了解了如何使用图神经网络（GNNs）进行节点分类。本次教程将深入探讨如何运用 GNNs 解决图分类问题。图分类是指在给定一个图数据集的情况下，根据图的一些结构属性对整个图进行分类，而不是对图中的节点进…...

编程日记 2025/5/15 4:11:20

C++游戏开发深度解析

引言在本篇文章中，我们将深入探讨C在游戏开发中的应用，包括内存管理、面向对象编程（OOP）、模板使用等，并通过实际代码示例来帮助理解。内存管理与智能指针 cpp 深色版本 #include <iostream> #include <…...

编程日记 2025/5/14 22:41:17

ultralytics 是什么？

ultralytics 是一个用于计算机视觉任务的 Python 库，专注于提供高效、易用的目标检测、实例分割和图像分类工具。它最著名的功能是实现 YOLO（You Only Look Once） 系列模型，特别是最新的 YOLOv8。 1. YOLO 是什么？ YO…...

编程日记 2025/5/18 17:38:22

【从零到一，C++项目实战】CineShare++（基于C++的视频点播系统）

🌈个人主页： 南桥几晴秋 🌈C专栏： 南桥谈C 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据…...

编程日记 2025/5/19 10:40:46

kaggle-ISIC 2024 - 使用 3D-TBP 检测皮肤癌-学习笔记

问题描述： 通过从 3D 全身照片 (TBP) 中裁剪出单个病变来识别经组织学确诊的皮肤癌病例数据集描述： 图像临床文本信息评价指标： pAUC，用于保证敏感性高于指定阈值下的AUC 主流方法分析（文本） 基于CatBoo…...

编程日记 2025/5/19 7:09:49

C语言深入解析 printf的底层源码实现

深入解析 printf 的底层源码实现 printf 是 C 标准库中最常用的函数之一，用于格式化输出字符串。它的底层实现复杂且高效，包含多个模块化的函数和机制。本文结合 GNU C Library（glibc）的源码，详细分析 printf 的实现原…...

编程日记 2025/5/16 10:45:16

IPhone14 Pro 设备详情

目录产品宣传图内部图——后设备详细信息产品宣传图内部图——后设备详细信息信息收集于HubWeb.cn...

编程日记 2025/5/4 4:32:57

vim多文件操作如何同屏开多个文件

[rootxxx ~]# vimdiff aa.txt bb.txt cc.txt #带颜色比较的纵向排列打开的同屏多文件操作示例： [rootxxx ~]# vimdiff -o aa.txt bb.txt cc.txt #带颜色比较的横向排列打开的同屏多文件操作示例： [rootxxx ~]# vim -O aa.txt bb.txt c…...

编程日记 2025/5/14 15:53:20

18款炫酷烟花合集

系列专栏《Python趣味编程》《C/C趣味编程》《HTML趣味编程》《Java趣味编程》写在前面 Python、C/C、HTML、Java等4种语言实现18款炫酷烟花的代码。 Python Python烟花① 完整代码：Python动漫烟花（完整代码）-CSDN博客 Python烟…...

编程日记 2025/5/13 3:04:34

服务器虚拟化技术详解与实战：架构、部署与优化

📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 引言在现代 IT 基础架构中，服务器虚拟化已成为提高资源利用率、降低运维成本、提升系统灵活性的重要手段。通过服务…...

编程日记 2025/5/17 15:19:11

01.双Android容器解决方案

目录写在前面一，容器 1.1 容器的原理 1.1.1 Namespace 1.1.2 Cgroups（Control Groups） 1.1.3 联合文件系统（Union File System） 1.2 容器的应用 1.2.1 微服务架构 1.2.2 持续集成和持续部署（CI/C…...

编程日记 2025/5/11 4:33:47

C++封装红黑树实现mymap和myset和模拟实现详解

文章目录 map和set的封装map和set的底层 map和set的模拟实现insertiterator实现的思路operatoroperator- - map和set的封装介绍map和set的底层实现 map和set的底层一份模版实例化出key的rb_tree和pair<k,v>的rb_tree rb_tree的Key和Value不是我们之前传统意义上的key/…...

编程日记 2025/5/13 0:58:16

嵌入式知识点总结 Linux驱动 (一)-指令-常用Linux指令 GCC指令 GDB调试指令驱动开发指令

针对于嵌入式软件杂乱的知识点总结起来，提供给读者学习复习对下述内容的强化。目录 1.怎么查看当前进程？怎么执行退出？怎么查看当前路径？ 2.ls命令执行有什么功能？可以带哪些参数？ 3.创建目录用什么命令…...

编程日记 2025/5/16 11:23:41

数字化创新者如何利用开源2+1链动模式AI智能名片S2B2C商城小程序源码重塑市场地位

摘要：在数字化转型的浪潮中，数字化创新者正通过整合前沿技术，重塑行业格局，引领市场变革。本文深入探讨了开源21链动模式、AI智能名片以及S2B2C商城小程序源码等技术在数字化创新中的应用，旨在揭示这些技术如何助力企业…...

编程日记 2025/5/16 14:45:10

步骤 1：安装依赖

步骤 2：创建 Vue 组件

代码解释

使用方法

相关文章：