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

html转PDF

news 来源：原创 2025/5/13 15:31:16

项目场景：

提示：这里简述项目相关背景：

在项目中会有一些需要页面转成PDF的情况，这里需要配合一些插件可以完成

使用html2canvas将使用canvas将页面转为base64图片流，并插入jspdf插件中，保存并下载pdf。

安装依赖

提示：这里描述项目中遇到的问题：

npm i html2canvas
npm i jspdf

解决方案1：

提示：这里填写该问题的具体解决方案：

1：创建htmlToPdf.ts文件

// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';const htmlToPdf = {getPdf(title) {html2Canvas(document.querySelector('#pdfStyle'), {allowTaint: false,taintTest: false,logging: false,useCORS: true,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 2, //按比例增加分辨率}).then((canvas) => {const pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向const ctx = canvas.getContext('2d')const a4w = 190const a4h = 272 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277//按A4显示比例换算一页图像的像素高度const imgHeight = Math.floor((a4h * canvas.width) / a4w) let  renderedHeight = 0;while (renderedHeight < canvas.height) {const page = document.createElement('canvas');page.width = canvas.width;//可能内容不足一页page.height = Math.min(imgHeight, canvas.height - renderedHeight); //用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight, canvas.height - renderedHeight),),0,0,);pdf.addImage(page.toDataURL('image/jpeg', 1.0),'JPEG',10,10,a4w,Math.min(a4h, (a4w * page.height) / page.width),); //添加图像到页面，保留10mm边距renderedHeight += imgHeight;if (renderedHeight < canvas.height) {pdf.addPage(); //如果后面还有内容，添加一个空页}// delete page;}//保存文件pdf.save(title + '.pdf');// loading = false;// console.log(loading);});},
};export default htmlToPdf;

2：在页面中使用

...
<!-- 按钮 -->
<el-button size="mini" type="primary" @click="pdfFunc" :loading="loading">转成pdf
</el-button>
...
<div id="pdfDom"><!-- 此处是希望转成pdf的部分的内容，用一个大div盒子包起来 -->
</div>
<script setup>
// 导入htmlToPdf.js
import htmlToPdf from '@/utils/htmlToPdf';
const pdfFunc = () => {loading.value = true;// 调用htmlToPdf工具函数htmlToPdf.getPdf('文档名称');// 定时器模拟按钮loading动画的时间setTimeout(() => {loading.value = false;ElMessage.success('打印成功!');}, 1000);
}
</script>

解决方案2：

1：创建htmlToPdf.ts文件

// utils/htmlToPdf.js：导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'export default {install(Vue, options) {// id-导出pdf的div容器；title-导出文件标题Vue.prototype.htmlToPdf = (id, title) => {const element = document.getElementById(`${id}`)const opts = {scale: 12, // 缩放比例，提高生成图片清晰度useCORS: true, // 允许加载跨域的图片allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用tainttest: true, // 检测每张图片已经加载完成logging: true // 日志开关，发布的时候记得改成 false}html2Canvas(element, opts).then((canvas) => {console.log(canvas)const contentWidth = canvas.widthconst contentHeight = canvas.height// 一页pdf显示html页面生成的canvas高度;const pageHeight = (contentWidth / 592.28) * 841.89// 未生成pdf的html页面高度let leftHeight = contentHeight// 页面偏移let position = 0// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高const imgWidth = 595.28const imgHeight = (592.28 / contentWidth) * contentHeightconst pageData = canvas.toDataURL('image/jpeg', 1.0)console.log(pageData)// a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面const PDF = new JsPDF('', 'pt', 'a4')// 当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {// addImage(pageData, 'JPEG', 左，上，宽度，高度)设置PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {// 超过一页时，分页打印（每页高度841.89）while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')}).catch((error) => {console.log('打印失败', error)})}}
}

2：在页面中使用

<template><div><divid="pdfDom">测试数据</div><el-button type="primary" round style="background: #4849FF" @click="btnClick">导出PDF</el-button></div></template><script>import JsPDF from 'jspdf'import html2Canvas from 'html2canvas'mounted() {// 导出pdfbtnClick() {this.$nextTick(() => {this.htmlToPdf('pdfDom', '个人报告')})},},</script>

html转PDF

项目场景： 提示：这里简述项目相关背景： 在项目中会有一些需要页面转成PDF的情况，这里需要配合一些插件可以完成使用html2canvas将使用canvas将页面转为base64图片流，并插入jspdf插件中，保存并下载pdf。…...

编程日记 2025/5/13 15:31:16

React 之 Redux =》理解+应用

文章目录 Redux基础介绍一、概述二、元素组成1. Action（动作）2. Reducer（纯函数）3. Store（仓库） 三、原理结构四、场景应用1. 大型复杂的单页应用（SPA）2. 多用户协作的应用3. 数据持…...

编程日记 2025/5/12 6:47:47

生成excel文件（有备注和表头的情况）

要使用 Java 导出 Excel 文件，并且通过 ExcelProperty 注解进行列的映射，可以利用 EasyExcel 库。EasyExcel 是阿里巴巴开源的一款高性能 Excel 读写工具，它支持通过注解将类与 Excel 的列进行映射，简化了 Excel 操作的复杂性。 …...

编程日记 2025/5/12 17:20:15

Docker 安装全攻略：从入门到上手

Docker 安装全攻略：从入门到上手在当今的软件开发与部署领域，Docker 已经成为了一项不可或缺的关键技术。它能够将应用程序及其依赖项打包成轻量级、可移植的容器，极大地简化了开发、测试和部署的流程。本文将详细讲解在不同操作系统下 Doc…...

编程日记 2025/5/13 14:34:25

@Scheduled注解的使用-SpringBoot-Springtask

Scheduled 注解是 Spring 框架中用于定时任务调度的核心注解之一。通过 Scheduled 注解，开发者可以非常方便地在 Spring 应用程序中定义和配置各种定时任务，包括固定速率执行、固定延迟执行、cron 表达式执行等。本文将详细讲解 Scheduled 注解的各个方面…...

编程日记 2025/5/7 4:40:13

Elasticsearch：使用 Ollama 和 Go 开发 RAG 应用程序

作者：来自 Elastic Gustavo Llermaly 使用 Ollama 通过 Go 创建 RAG 应用程序来利用本地模型。关于各种开放模型，有很多话要说。其中一些被称为 Mixtral 系列，各种规模都有，而一种可能不太为人所知的是 openbiollm，这…...

编程日记 2025/5/13 14:41:56

Linux 下 Mamba 环境安装踩坑问题汇总（重置版）

导航安装教程导航 Mamba 及 Vim 安装问题参看本人博客：Mamba 环境安装踩坑问题汇总及解决方法（初版）Linux 下Mamba 及 Vim 安装问题参看本人博客：Mamba 环境安装踩坑问题汇总及解决方法（重置版）Windows …...

编程日记 2025/5/6 17:54:00

（免费送源码）计算机毕业设计原创定制：Java+springboot+MySQL springboot 线上线下一体化的宠物交易

摘要网络发布信息有其突出的优点，即信息量大，资源丰富，更新速度快等，很符合人们希望以捷、便利的方式获得最多最有效信息的要求。本系统就是一个线上线下一体化的宠物交易，为商家提供一个信息发布的平台&#xff0…...

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

【Rust自学】7.4. use关键字 Pt.2 ：重导入与换国内镜像源教程

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.4.1. 使用pub use重新导入名称使用use将路径导入作用域内后。该名称在词作用域内是私有的。以上一篇文章的代码为例： m…...

编程日记 2025/5/13 15:00:47

自动生成关于软件程序开发的100个文件并可提供下载入口

创建一个包含100个关于软件程序开发的文件并提供下载入口是一个庞大的任务，因为这需要编写大量的代码、文档和示例。不过，我可以提供一个大致的框架和指导，帮助你生成这些文件，并说明如何设置下载入口。文件生成思路编程语言文…...

编程日记 2025/5/10 20:16:06

Linux下基本指令

一、什么是指令指令本质是可执行程序，在执行指令前，先在系统中查找对应的指令。在Linux系统中指令存在于/usr/bin/路径下二、ls 指令 1、语法 ls [选项][目录或文件] 2、功能对于目录，该命令列出该目录下的所有子目录与文件。对于文…...

编程日记 2025/5/13 15:27:55

2024-12-25-sklearn学习（20）无监督学习-双聚类料峭春风吹酒醒，微冷，山头斜照却相迎。

文章目录 sklearn学习(20) 无监督学习-双聚类1 Spectral Co-Clustering1.1 数学公式 2 Spectral Biclustering2.1 数学表示 3 Biclustering 评价 sklearn学习(20) 无监督学习-双聚类文章参考网站： https://sklearn.apachecn.org/ 和 https://scikit-learn.org/sta…...

编程日记 2025/5/10 20:15:15

编程考古-传奇的开始Delphi（下）含所有版本.iso

概览 Delphi 的最新版本，即 Delphi 12，勾勒出了自公司创立以来的一条进化之路。该平台不断通过提升开发者生产力、扩展其支持的平台范围以及引入前沿技术来实现自我完善。作为 Embarcadero 提供的主要快速应用开发（RAD）环境&…...

编程日记 2025/5/13 14:11:36

集合stream

1.Collection集合 1.1数组和集合的区别【理解】相同点都是容器,可以存储多个数据不同点数组的长度是不可变的,集合的长度是可变的数组可以存基本数据类型和引用数据类型集合只能存引用数据类型,如果要存基本数据类型,需要存对应的包装类 1.2集合类体系结构【理解】…...

编程日记 2025/5/11 17:37:58

Xshell 和 Xftp 更新提示问题的解决方法及分析

Xshell 和 Xftp 更新提示问题的解决方法及分析在个人使用 Xshell 和 Xftp 的过程中，通过官网注册使用一段时间后，往往会遇到这样的问题：软件提示“要继续使用此程序，你必须应用最新的更新或使用新版本”。对于那些觉得更新比较麻…...

编程日记 2025/5/13 14:55:12

Docker安装MongoDB

Docker安装MongoDB 1、拉取镜像2、创建容器3、启动容器4、进入容器内部5、进入admin数据库6、添加管理员，其拥有管理用户和角色的权限7、进行认证8、通过admin添加普通用户 1、拉取镜像 docker pull mongo:4.0.32、创建容器 docker create --name mongodb-server …...

编程日记 2025/5/3 11:10:43

解锁自动化新高度，zTasker v2.0全方位提升效率

zTasker 是一款集强大功能与高效操作于一体的自动化任务管理软件，以其简单直观的设计和一键完成操作的特性深受用户喜爱。软件体积小巧，运行速度极快，支持超过 100 种不同的任务类型，并提供 30 多种定时或条件触发方式&#xff0c…...

编程日记 2025/5/8 11:18:27

Windows Server 安装 MySQL 8.0 详细指南

文章目录 Windows Server 安装 MySQL 8.0 详细指南准备工作安装步骤1. 解压安装包2. 初始化数据目录3. 安装 MySQL 服务4. 启动 MySQL 服务 MySQL 配置文件 (my.ini)5. 设置 root 密码6. 配置远程访问安全建议常见问题排查性能优化提示结语 👉洛秋资源小站 Windows…...

编程日记 2025/5/7 17:13:48

uniapp小程序使用webview 嵌套 vue 项目

uniapp小程序使用webview 嵌套 vue 项目小程序中发送 <web-view :src"urlSrc" message"handleMessage"></web-view>export default {data() {return {urlSrc: "",};},onLoad(options) {// 我需要的参数比较多所以比较臃肿// 获取…...

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

高效搭建Nacos：实现微服务的服务注册与配置中心

一、关于Nacos 1.1 简介 Nacos（Dynamic Naming and Configuration Service）是阿里巴巴开源的一款动态服务发现、配置管理和服务管理平台。它旨在帮助开发者更轻松地构建、部署和管理分布式系统，特别是在微服务架构中。Nacos 提供了简单易用…...

编程日记 2025/5/11 12:49:30

JavaScript 实现动态产品展示网页

JavaScript 实现动态产品展示网页 1. HTML 页面结构2. CSS 样式设计3. JavaScript 实现功能功能总结本文设计了一个基于 JavaScript 的动态产品展示网页案例，核心功能包括： 动态产品分类过滤：通过点击分类按钮，仅显示属于该分类…...

编程日记 2025/5/10 7:13:36

小程序配置文件 —— 13 全局配置 - window配置

全局配置 - window配置这里讲解根目录 app.json 中的 window 字段，window 字段用于设置小程序的状态栏、导航条、标题、窗口背景色； 状态栏：顶部位置，有网络信号、时间信息、电池信息等；导航条：有一个当…...

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

【小程序】wxss与rpx单位以及全局样式和局部样式

目录 WXSS 1. 什么是 WXSS 2. WXSS 和 CSS 的关系 rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 px 之间的单位换算* 样式导入 1. 什么是样式导入 2. import 的语法格式全局样式和局部样式 1. 全局样式 2. 局部样式 WXSS 1. 什么是 WXSS WXSS (We…...

编程日记 2025/5/10 8:15:15

矩阵的因子分解1-奇异值分解

文章目录矩阵的因子分解1-奇异值分解求法归纳例1. 对矩阵 A ( 0 1 − 1 0 0 2 1 0 ) A \begin{pmatrix} 0 & 1 \\ -1 & 0 \\ 0 & 2 \\ 1 & 0 \end{pmatrix} A 0−1011020 进行奇异值分解1. 计算 A H A A^H A AHA 的特征值和特征向量2. 将奇异值按…...

编程日记 2025/5/11 15:59:37

Hive其十，优化和数据倾斜

目录 Hive优化 1、开启本地模式 2、explain分析SQL语句 3、修改Fetch操作 4、开启hive的严格模式【提高了安全性】 5、JVM重用 6、分区、分桶以及压缩 7、合理设置map和reduce的数量合理设置map数量： 设置合理的reducer的个数 8、设置并行执行 9、CBO优…...

编程日记 2025/5/12 18:00:07

云原生后端开发（一）

云原生后端开发云原生（Cloud-Native）是指一种构建和运行应用程序的方式，它充分利用了云计算的特点，比如弹性伸缩、自动化部署、容器化等。在云原生的架构下，后端应用通常具备高度可扩展、可维护、易于自动化管理的特…...

编程日记 2025/5/8 15:16:57

Python常用模块详解：从操作系统接口到日志记录

Python常用模块详解：从操作系统接口到日志记录 1. os模块：操作系统接口主要功能示例 2. io模块：流操作主要功能示例 3. time模块：时间操作主要功能示例 4. argparse模块：命令行参数解析主要功能示例 5. logging模块&am…...

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

修改成清华镜像源解决Anaconda报The channel is not accessible源通道不可用问题

修改成清华镜像源解决Anaconda报The channel is not accessible源通道不可用问题最近在通过pycharm开发python程序，引用anaconda环境建立虚拟环境时报错，报UnavailableInvalidChannel: The channel is not accessible or is invalid.应该是镜像源访问通…...

编程日记 2025/4/29 17:27:01

Python之Web开发

一、基本概念 Web开发是指创建和维护网站或Web应用的过程。一个典型的Web应用包括前端（客户端）和后端（服务器端）。前端负责用户界面的设计和交互，而后端则处理业务逻辑、数据存储和与数据库的通信。Python作为一门功能…...

编程日记 2025/5/5 17:46:05

CDN如何抵御DDoS攻击

一、DDoS攻击的定义 DDoS（Distributed Denial of Service，分布式拒绝服务）攻击是一种常见且破坏性较大的网络攻击方式。攻击者通过控制大量分布在全球各地的受感染设备（称为“僵尸网络”），同时向目标服务器…...

编程日记 2025/5/3 21:13:28

基于进程信号量的多线程同步机制研究与实现

1 信号量 1.1 原理与概念信号量机制本质是对于资源的预订操作，线程或者进程预订了之后，确保未来有一段时间，资源是属于我的。对于预订资源，会有一个最小单位，资源都是以这个最小单位为整体被使用的。信号量需要做…...

编程日记 2025/5/7 20:22:34

七、队列————相关概念详解

队列————相关概念详解前言一、队列1.1 队列是什么?1.2 队列的类比二、队列的常用操作三、队列的实现3.1 基于数组实现队列3.1.1 基于环形数组实现的队列3.1.2 基于动态数组实现的队列 3.2 基于链表实现队列四、队列的典型应用总结前言本篇文章，我们一起来…...

编程日记 2025/5/7 6:01:32

钉钉h5微应用鉴权配置客户端 API 鉴权步骤

这里记录一下使用的钉钉h5微应用配置客户端 API 鉴权的内容注意不是所有的都功能都需要鉴权。先要引入钉钉环境见下链接 https://blog.csdn.net/KLS_CSDN/article/details/144794982?spm1001.2014.3001.5501 引入鉴权代码到前端页面并配置以下参数： dd.con…...

编程日记 2025/5/12 11:24:33

04.HTTPS的实现原理-HTTPS的混合加密流程

04.HTTPS的实现原理-HTTPS的混合加密流程简介1. 非对称加密与对称加密2. 非对称加密的工作流程3. 对称加密的工作流程4. HTTPS的加密流程总结简介主要讲述了HTTPS的加密流程，包括非对称加密和对称加密两个阶段。首先，客户端向服务器发送请求&#xf…...

编程日记 2025/5/9 15:27:32

Python中构建终端应用界面利器——Blessed模块

在现代开发中，命令行应用已经不再仅仅是一个简单的文本输入输出工具。随着需求的复杂化和用户体验的重视，终端界面也逐渐成为一个不可忽视的设计环节。如果你曾经尝试过开发终端UI，可能对传统的 print() 或者 input() 函数感到不满足&#…...

编程日记 2025/5/9 2:20:12

【Python】基于Python实现日志聚合与分析工具：利用Logstash与Fluentd构建高效分布式日志系统

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界在分布式系统中，日志数据的生成速度和数量呈指数级增长，传统的日志管理方式已无法满足现代企业对实时性、可扩展性和高效性的需求。本文深…...

编程日记 2025/5/8 9:23:23

汽车网络安全基线安全研究报告

一、引言随着汽车行业朝着智能网联方向飞速发展，汽车网络安全已成为保障用户安全和行业健康发展的关键要素。本报告将深入探讨汽车网络安全相关内容，以及国际、国内重要的汽车网络安全标准基线和相应防护措施等内容。二、汽车网络安全的重要性 &…...

编程日记 2025/5/10 1:36:32

[pdf、epub]260道《软件方法》强化自测题业务建模需求分析共216页（202412更新）

DDD领域驱动设计批评文集做强化自测题获得“软件方法建模师”称号《软件方法》各章合集 260道《软件方法》强化自测题业务建模需求分析共216页（202412更新） 已上传到本CSDN账号的资源如果下载不到，也可以访问以下链接： ht…...

编程日记 2025/5/11 6:02:32

工业4.0和MES（制造执行系统）方案（附实践资料）

工业4.0和MES（制造执行系统）方案是智能制造领域中的关键组成部分，它们共同推动着制造业的数字化转型。以下是工业4.0和MES方案的一些核心要点： 智能制造背景： 工业4.0是第四次工业革命，它结合了信息通信技术…...

编程日记 2025/5/10 15:05:49

机器视觉中的单线程、多线程与跨线程：原理与应用解析

在机器视觉应用中，程序的运行效率直接影响到系统的实时性和稳定性。随着任务复杂度的提高，单线程处理往往无法满足高性能需求，多线程技术因此被广泛应用。此外，跨线程操作（如在多线程中更新界面或共享资源）…...

编程日记 2025/5/8 4:30:20

性能测试瓶颈：CPU 问题的深度分析和调优

🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快我们做性能测试的时候，除了使用工具编写脚本并执行之外，最核心的工作就是做性能测试结果分析和问题调优。然后在做性能测试的时候&#xf…...

编程日记 2025/5/12 22:22:38

云手机与Temu矩阵：跨境电商运营新引擎

云手机与 Temu 矩阵结合的基础云手机技术原理云手机基于先进的 ARM 虚拟化技术，在服务器端运行 APP。通过在服务器上利用容器虚拟化软件技术，能够虚拟出多个独立的手机操作系统实例，每个实例等同于一部单独的手机，可独立运行各…...

编程日记 2025/5/9 20:37:49

Oracle考试多少分算通过？

OCP和OCM认证的考试及格分数并不是固定的，而是根据考试的难度和考生的整体表现来确定。对于OCP认证，考生需要全面掌握考试要求的知识和技能，并在考试中表现出色才有可能通过。而对于OCM认证，考生则需要在每个模块中都达到一定的水…...

编程日记 2025/5/13 9:23:40

【UE5.3.2】安装metahuman插件

Unable to find plugin ‘MetaHuman’报错 Unable to find plugin MetaHuman (referenced via RPect_5_3.uproject). Install it and try again, or remove it from the required plugin list. 10>Microsoft.MakeFile.Targets(44,5): Error MSB3073 :...

编程日记 2025/3/30 20:31:17

python lambda函数用法

在Python中，lambda函数是一种用于创建匿名函数的简便方式。它允许你快速定义一个简单的函数，而不需要使用传统的def语句。lambda函数通常用于一次性的操作或作为参数传递给其他函数。 lambda函数的语法： lambda 参数1, 参数2, ... : 表达式l…...

编程日记 2025/5/3 17:01:00

acitvemq AMQP:因为消息映射策略配置导致的MQTT接收JMS消息乱码问题 x-opt-jms-dest x-opt-jms-msg-type

使用ActiveMQ（5.14.5）作消息系统服务的场景下， 当我用Apache Qpid Proton发送消息(使用AMQP协议)发送JMS消息，用Paho MQTT接收消息的时候， 收到的消息前面总是有一串乱码，大概就是这样： 4Sp?AS…...

编程日记 2025/5/6 17:22:34

ida的使用

一.ida的基本设置在IDA的安装根目录下有许多文件夹，各个文件夹存储不同的内容 1.目录结构 cfg：包含各种配置文件，基本IDA配置文件ida.cfg,GUI配置文件idagui.cfg，文本模式用户界面配置文件idatui.cfg, idc：包含…...

编程日记 2025/5/11 3:49:27

archery docker安装

#下载Archery-1.11.3.tar.gz https://codeload.github.com/hhyo/Archery/tar.gz/refs/tags/v1.11.3 cd /root tar -zxvf Archery-1.11.3.tar.gz cd /root/Archery-1.11.3/src/docker-compose #启动 docker compose -f docker-compose.yml up -d#表结构初始化 docker exec -ti a…...

编程日记 2025/5/5 12:46:42