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

页面转 PDF 功能的实现思路与使用方法

引言

在 Web 开发中,有时我们需要将页面的特定部分转换为 PDF 格式,以便用户下载和保存。本文将详细介绍如何使用 html2canvas jspdf 这两个强大的库来实现这一功能,并且结合实际代码讲解其实现思路与使用方法。完整源码(src/utils/htmlToPdf.js):https://gitcode.com/Jiaberrr/vue3-pc-template/overview

一、前置准备

首先,确保你的项目中已经安装了 html2canvas 和 jspdf 库,以及 element-plus(用于展示加载状态)。在代码中引入相关依赖:

import html2canvas from 'html2canvas'; // 将 html 页面转换成图片import jsPDF from 'jspdf'; // 将图片生成 pdfimport { ElLoading } from 'element-plus';

二、代码实现思路

(一)核心函数 downloadPdf

我们封装了一个名为 downloadPdf 的异步函数,它接收两个参数:elementId 和 pdfName。

export async function downloadPdf(elementId, pdfName) {//...}
  • elementId:用于指定页面中要转换为 PDF 的元素(盒子)的 ID,该盒子内部包含了我们想要生成 PDF 的内容。
  • pdfName:生成的 PDF 文件的名称。

(二)加载状态展示

在函数内部,首先使用 ElLoading 组件来显示一个加载提示,让用户知道正在进行下载操作。

const loadingInstance = ElLoading.service({lock: true,text: '下载中',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.8)'});

(三)页面样式调整

获取要转换的 DOM 元素,并将其背景设置为白色,同时调整宽度为 190mm,以适配后续的 A4 纸布局。这里还保存了原始的样式,以便在转换完成后恢复。

let pdfDom = document.getElementById(elementId);pdfDom.style.background = '#FFFFFF';const originalStyle = pdfDom.getAttribute('style');pdfDom.style.width = '190mm';

(四)延迟执行与页面截图

设置一个短暂的延迟(100 毫秒)后执行 htmlToCanvas 函数,开始对指定元素进行截图操作。这是因为页面样式调整可能需要一点时间生效,确保截图的准确性。

setTimeout(() => {htmlToCanvas(pdfDom);}, 100);

(五)图片转 PDF 核心逻辑

  • htmlToCanvas 函数:使用 html2canvas 库对指定的 DOM 元素进行截图,它接收一些配置参数,如关闭日志输出(logging: false)和启用跨域资源加载(useCORS: true)。当截图成功后,获取到 canvas 对象,接着创建一个 jsPDF 实例,设置为纵向 A4 纸布局。
function htmlToCanvas(pdfDom) {html2canvas(pdfDom, {logging: false,useCORS: true}).then((canvas) => {// eslint-disable-next-line new-caplet pdf = new jsPDF('p', 'mm', 'a4');canvasToPdf(canvas, pdf);//...后续操作});}
  • canvasToPdf 函数:这是将 canvas 图片转换为 PDF 内容的关键函数。首先获取 canvas 的 2D 绘图上下文,定义 A4 纸的尺寸(考虑四边 10mm 边距,显示区域为 190 x 277)。然后通过循环,按照 A4 纸的显示比例,将 canvas 中的内容逐页添加到 PDF 中。如果内容高度超过一页,会自动添加新的页面,确保所有内容都能完整转换。
function canvasToPdf(canvas, pdf) {let ctx = canvas.getContext('2d');let a4w = 190;let a4h = 277;let imgH = Math.floor(canvas.width / a4w * a4h);let renderH = 0;while (renderH < canvas.height) {let page = document.createElement('canvas');page.width = canvas.width;page.height = Math.min(imgH, canvas.height - renderH);page.getContext('2d').putImageData(ctx.getImageData(0, renderH, canvas.width, Math.min(imgH, canvas.height - renderH)), 0, 0);pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));renderH += imgH;if (renderH < canvas.height) {pdf.addPage();}}}

(六)收尾操作

在 PDF 生成并保存后,关闭加载提示,同时将之前转换的 DOM 元素的样式恢复为原始状态。

loadingInstance.close();pdf.save(pdfName + '.pdf');if (originalStyle) {pdfDom.setAttribute('style', originalStyle);}

三、使用方法

在你的项目中,当需要将某个页面区域转换为 PDF 时,只需按照以下方式调用 downloadPdf 函数:

// 假设页面中有一个 ID 为'myContent' 的 div 元素,要将其内容转换为 PDF 并命名为'myDocument'downloadPdf('myContent','myDocument');

通过以上步骤,就可以轻松实现页面转 PDF 的功能,为用户提供便捷的文档下载体验。希望本文对你理解和使用该功能有所帮助,如有任何疑问,欢迎在评论区交流。

相关文章:

页面转 PDF 功能的实现思路与使用方法

引言 在 Web 开发中&#xff0c;有时我们需要将页面的特定部分转换为 PDF 格式&#xff0c;以便用户下载和保存。本文将详细介绍如何使用 html2canvas 和 jspdf 这两个强大的库来实现这一功能&#xff0c;并且结合实际代码讲解其实现思路与使用方法。完整源码&#xff08;src/…...

【保姆级教程】基于OpenCV+Python的人脸识别上课签到系统

【保姆级教程】基于OpenCVPython的人脸识别上课签到系统 一、软件安装及环境配置1. 安装IDE&#xff1a;PyCharm2. 搭建Python的环境3. 新建项目、安装插件、库 二、源文件编写1. 采集人脸.py2. 训练模型.py3. 生成表格.py4. 识别签到.py5. 创建图形界面.py 三、相关函数分析1.…...

docker-compose部署下Fastapi中使用sqlalchemy和Alembic

本篇介绍使用Fastapi sqlalchemy alembic 来完成后端服务的数据库管理&#xff0c;并且通过docker-compose来部署后端服务和数据库Mysql。包括&#xff1a; 数据库创建&#xff0c;数据库用户创建数据库服务发现Fastapi 连接数据库Alembic 连接数据库服务健康检查 部署数据…...

Oracle:ORA-00904: “10“: 标识符无效报错详解

1.报错Oracle语句如下 SELECT YK_CKGY.ID,YK_CKGY.DJH,YK_CKGY.BLRQ,YK_CKGY.ZBRQ,YK_CKGY.SHRQ,YK_CKGY.YT,YK_CKGY.ZDR,YK_CKGY.SHR,YK_CKGY.BZ,YK_CKGY.JZRQ,YK_CKGY.ZT,YK_CKGY.CKLX,(case YK_CKGY.CKLXwhen 09 then药房调借when 02 then科室退药when 03 then损耗出库when…...

C语言#define定义宏

目录 一、什么是宏以及宏的声明方式 1.宏常量&#xff1a; 2.宏函数&#xff1a; 二、宏的替换原则 三、宏设计的易犯错误 ERROR1&#xff1a;尾部加分号&#xff08;当然有些特定需要加了分号&#xff0c;这里说明一般情况&#xff09; ERROR2&#xff1a;宏函数定义时&…...

SpringBoot操作spark处理hdfs文件

SpringBoot操作spark处理hdfs文件 1、导入依赖 <!-- spark依赖--><dependency><groupId>org.apache.spark</groupId><artifactId>spark-core_2.12</artifactId><version>3.2.2</version></dependency><depend…...

消息队列架构、选型、专有名词解释

私人博客传送门 消息队列专有名词解释 | 魔筝炼药师 MQ选型 | 魔筝炼药师 MQ架构 | 魔筝炼药师 MQ顺序消息 | 魔筝炼药师...

用OpenCV实现UVC视频分屏

分屏 OpencvUVC代码验证后话 用OpenCV实现UVC摄像头的视频分屏。 Opencv opencv里有很多视频图像的处理功能。 UVC Usb 视频类&#xff0c;免驱动的。视频流格式有MJPG和YUY2。MJPG是RGB三色通道的。要对三通道进行分屏显示。 代码 import cv2 import numpy as np video …...

Allure 集成 pytest

Allure 是一个强大的测试报告工具&#xff0c;与 pytest 集成可以生成详细的测试报告&#xff0c;包括测试步骤、测试数据、截图、错误堆栈等。 1. 安装 Allure 和相关依赖 安装 pytest-allure-adaptor 插件&#xff1a; pip install allure-pytest确保本地已安装 Allure 工具。…...

【Python】构建智能语音助手:使用Python实现语音识别与合成的全面指南

随着人工智能技术的迅猛发展&#xff0c;语音助手已成为人们日常生活中不可或缺的一部分。从智能手机到智能家居设备&#xff0c;语音交互提供了便捷高效的人机交互方式。本文旨在全面介绍如何利用Python编程语言及其强大的库——SpeechRecognition和gTTS&#xff0c;构建一个基…...

在 Arthas 中调用 Spring Bean 方法

获取 Spring 应用上下文 使用工具类 如果你的项目中有一个工具类实现了 ApplicationContextAware 接口&#xff0c;如 cn.shutdown.pf.utils.SpringContextUtils&#xff0c;可以使用该类获取 ApplicationContext&#xff1a; Component public final class SpringContextUt…...

Nginx入门笔记

Nginx入门笔记 一、Nginx基本概念二、代理1、正向代理2、反向代理 三、准备工作1、CentOS 7安装nginx&#xff08;1&#xff09;. 安装必要的依赖&#xff08;2&#xff09;下载nginx&#xff08;3&#xff09;编译安装&#xff08;4&#xff09;编译并安装 Nginx(5)启动nginx …...

【单片机】实现一个简单的ADC滤波器

实现一个 ADC的滤波器&#xff0c;PT1 滤波器&#xff08;也称为一阶低通滤波器&#xff09;&#xff0c;用于对输入信号进行滤波处理。 typedef struct PT1FilterSettings PT1FilterSettings; struct PT1FilterSettings {//! last Filter output valueuint32_t filtValOld;//…...

开源 vGPU 方案 HAMi 解析

开源 vGPU 方案 HAMi 一、k8s 环境下 GPU 资源管理的现状与问题 &#xff08;一&#xff09;资源感知与绑定 在 k8s 中&#xff0c;资源与节点紧密绑定。对于 GPU 资源&#xff0c;我们依赖 NVIDIA 提供的 device-plugin 来进行感知&#xff0c;并将其上报到 kube-apiserver…...

备考蓝桥杯:顺序表详解(静态顺序表,vector用法)

目录 1.顺序表的概念 2.静态顺序表的实现 总代码 3.stl库动态顺序表vector 测试代码 1.顺序表的概念 要理解顺序表&#xff0c;我们要先了解一下什么是线性表 线性表是n个具有相同特征的数据元素的序列 这就是一个线性表 a1是表头 a4是表尾 a2是a3的前驱 a3是a2的后继 空…...

OA系统如何做好DDOS防护

OA系统如何做好DDOS防护&#xff1f;在数字化办公蔚然成风的当下&#xff0c;OA&#xff08;办公自动化&#xff09;系统作为企业内部管理与协作的神经中枢&#xff0c;其安全性和稳定性直接关系到企业的日常运营效率、信息流通效率以及长远发展。OA系统不仅承载着企业内部的日…...

使用 Python 的 pyttsx3 库进行文本转语音

1. 什么是 pyttsx3&#xff1f; 1.1 pyttsx3 是一个 Python 库&#xff0c;它可以将文本转换为语音。与其他文本转语音库&#xff08;如 gTTS&#xff09;不同&#xff0c;pyttsx3 不依赖于网络服务&#xff0c;它使用本地的 TTS&#xff08;Text-to-Speech&#xff09;引擎&a…...

如何在Windows上编译OpenCV4.7.0

前言 ​ 参考&#xff1a;Win10 下编译 OpenCV 4.7.0详细全过程&#xff0c;包含xfeatures2d 这里在其基础上还出现了一些问题&#xff0c;仅供参考。 正文 一、环境 1、win10 2、cmake-gui 3、opencv4.7.0 4、VS2019 二、编译过程 1、下载需要的文件&#xff1a; 通…...

【玩转全栈】----Django连接MySQL

阅前先赞&#xff0c;养好习惯&#xff01; 目录 1、ORM框架介绍 选择建议 2、安装mysqlclient 3、创建数据库 4、修改settings&#xff0c;连接数据库 5、对数据库进行操作 创建表 删除表 添加数据 删除数据 修改&#xff08;更新&#xff09;数据&#xff1a; 获取数据 1、OR…...

25/1/4 算法笔记<强化学习> 生成对抗模仿学习

基于生成对抗网络的模仿学习&#xff0c;假设存在一个专家智能体&#xff0c;其策略可以看成最优策略&#xff0c;我们就可以通过直接模仿这个专家在环境中交互的动作数据来训练一个策略&#xff0c;并不需要用到环境提供的奖励信息。 生成对抗模仿学习GAIL实质上就是模仿了专家…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...