生成PDF文件:从html2canvas和jsPdf渲染到Puppeteer矢量图

devtools/2025/3/25 2:55:12/

刚刚实现而已:第一次明白,双击或file:///打开html文件,居然和从localhost:3000打开同一个html文件有本质的区别。

字体居然还能以Base64代码嵌入到网页,只是太大太笨。

需要安装node.jsnpm安装更多依赖:
npm init -y
npm install express puppeteer uuid cors

在这里插入图片描述在这里插入图片描述需要管理员在命令行:
npm start
node server.js (后台、后端,也涉及很多繁琐的设置)
如果不是有大语言模型手把手交,效率会低不少。

反复测试,仍不完美。但server.js应该是可以固定下来了:

javascript">const express = require('express');
const puppeteer = require('puppeteer');
const path = require('path');
const fs = require('fs').promises;
const { v4: uuidv4 } = require('uuid');
const cors = require('cors');const app = express();
app.use(express.static('public'));
const port = 3000;// 配置 CORS
app.use(cors({origin: 'http://localhost:3000', // 明确允许客户端来源methods: ['GET', 'POST'],allowedHeaders: ['Content-Type']
}));app.use(express.json({ limit: '10mb' }));
app.use(express.static(path.join(__dirname, 'public')));app.get('/', (req, res) => {res.send('服务器运行正常!请访问 /index.html 或点击“打印到 PDF”按钮生成 PDF。');
});app.post('/generatepdf', async (req, res) => {console.log('Received request to generate PDF');const { html } = req.body;if (!html) {console.error('Missing HTML content in request body');return res.status(400).send('Missing HTML content');}try {console.log('Launching Puppeteer...');const browser = await puppeteer.launch({headless: true,args: ['--no-sandbox', '--disable-setuid-sandbox']});console.log('Puppeteer launched successfully');const page = await browser.newPage();console.log('Setting page content...');await page.setContent(html, { waitUntil: 'networkidle0' });console.log('Page content set');console.log('Generating PDF...');const pdfBuffer = await page.pdf({format: 'A4',printBackground: true,preferCSSPageSize: true});console.log('PDF buffer size:', pdfBuffer.length);await browser.close();console.log('PDF generated successfully');// 保存 PDF 文件用于调试const filename = `jingyesi-output-${uuidv4()}.pdf`;await fs.writeFile(path.join(__dirname, filename), pdfBuffer);console.log(`PDF saved to ${filename} for debugging`);// 设置响应头并发送 PDF(使用二进制发送)res.set({'Content-Type': 'application/pdf','Content-Length': pdfBuffer.length,'Content-Disposition': 'attachment; filename="jingyesi.pdf"'});res.end(pdfBuffer, 'binary'); // 使用 res.end 确保二进制数据发送} catch (error) {console.error('Failed to generate PDF:', error);res.status(500).send('Failed to generate PDF: ' + error.message);}
});app.listen(port, () => {console.log(`服务器运行在 http://localhost:${port}`);
});

要保持 localhost:3000 后台服务器一直开启状态。访问本地其它资源的虚拟网页仍然要http-server --c-1 -cors 另外开或者修改地址之后也从同一个服务器指向的文件夹实现

不完美的地方主要是,Puppeteer 对嵌入字体的支持比较弱,Base64代码把整个字体文件打包进去之外太笨拙,引用网络字体似乎效果不理想。

尝试修改排版,但下面这个显然效果不佳:

在这里插入图片描述
在这里插入图片描述

文章来源:https://blog.csdn.net/stereohomology/article/details/146350349
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/devtools/169312.html

相关文章

llama-factory 微调 Qwen2.5-3B-Instruct

0、资源链接 官方 readme: https://github.com/hiyouga/LLaMA-Factory/blob/v0.9.1/README_zh.md 官方文档: https://llamafactory.readthedocs.io/zh-cn/latest/ 官方推荐的知乎教程:https://zhuanlan.zhihu.com/p/695287607 1、安装 LLaMA Factory git clone --depth …

腾讯云golang一面面试题

1. Go 底层是否有自动回收对象的机制?(runtime.finalizer) Go 语言的垃圾回收机制(GC)会自动回收不再使用的对象。runtime.SetFinalizer 是 Go 的一个特性,允许为对象设置一个终结器(finalizer),当对象被垃圾回收时,会调用这个终结器。终结器通常用于释放资源,如关…

olap引擎底层原理

一、OLAP引擎核心原理 1. 多维数据模型 OLAP引擎的核心在于通过**多维数据立方体(Cube)**组织数据,将数据从多个维度(如时间、地域、产品等)进行抽象,支持快速切片、钻取、旋转等操作[6][7]。 维度&…

网络安全威胁与防护措施(中)

6. 拒绝服务攻击(DoS/DDoS, Denial of Service/Distributed Denial of Service) **拒绝服务攻击(DoS)和分布式拒绝服务攻击(DDoS)**是两种常见的网络攻击方式,旨在使目标计算机、服务器或网络资…

es6什么是暂时性死区,为何会存在

在 ES6 中,暂时性死区(Temporal Dead Zone,TDZ) 是与 let 和 const 声明相关的一个核心概念。它的存在是为了解决 JavaScript 早期设计中的一些问题(如变量提升导致的意外行为),并强制开发者遵循…

<项目> 主从Reactor模型的高并发服务器

目录 Reactor 概念 分类 单Reactor单线程 单Reactor多线程 多Reactor多线程 项目介绍 项目规划 模块关系 实现 TimerWheel -- 时间轮定时器 定时器系统调用 时间轮设计 通用类型Any Buffer Socket Channel Poller EventLoop(核心) eventfd 设计思路 …

机器学习中的分布统计量:从理论到应用

机器学习中的分布统计量:从理论到应用 1. 引言:统计量在机器学习中的重要性 在机器学习的生命周期中,从数据理解到模型部署,统计量扮演着至关重要的角色。它们不仅是理解数据分布的窗口,更是保障模型稳定性和可靠性的…

STM32---FreeRTOS内存管理实验

一、简介 1、FreeRTOS内存管理简介 2、FreeRTOS提供的内存管理算法 1、heap_1内存管理算法 2、heap_2内存管理算法 4、heap_4内存管理算法 5、heap_5内存管理算法 二、FreeRTOS内存管理相关API函数介绍 三、 FreeRTOS内存管理实验 1、代码 main.c #include "st…