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

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

news 2025/3/19 14:11:12

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

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

需要安装node.js，npm安装更多依赖：
npm init -y
npm install express puppeteer uuid cors

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

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

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}`);
});