在next.js中生成PDF

在 Next.js 中生成 PDF 可以通过多种方式实现，具体取决于你的需求和偏好。以下是几种常见的方法：

方法一：使用 react-pdf 库

react-pdf 是一个流行的库，用于在 React 应用程序中渲染 PDF 文件。你可以使用它来生成和下载 PDF。

1. 安装依赖： npm install @react-pdf/renderer
2. 创建一个 PDF 组件： 创建一个新的 React 组件来定义 PDF 的内容和布局。 // components/MyPDF.js import React from 'react'; import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'; const styles = StyleSheet.create({ page: { flexDirection: 'row', backgroundColor: '#E4E4E4' }, section: { margin: 10, padding: 10, flexGrow: 1 } }); const MyPDF = () => ( <Document> <Page size="A4" style={styles.page}> <View style={styles.section}> <Text>Section #1</Text> </View> <View style={styles.section}> <Text>Section #2</Text> </View> </Page> </Document> ); export default MyPDF;
3. 在页面中使用 react-pdf 渲染 PDF： 使用 PDFViewer 或 PDFDownloadLink 组件来显示或下载 PDF。 // pages/index.js import React from 'react'; import { PDFViewer, PDFDownloadLink } from '@react-pdf/renderer'; import MyPDF from '../components/MyPDF'; const Home = () => ( <div> <h1>Generate PDF</h1> <PDFViewer width="100%" height="600px"> <MyPDF /> </PDFViewer> <PDFDownloadLink document={<MyPDF />} fileName="my-pdf.pdf"> {({ blob, url, loading, error }) => loading ? 'Loading document...' : 'Download now!' } </PDFDownloadLink> </div> ); export default Home;

方法二：使用 puppeteer 库

puppeteer 是一个 Node.js 库，提供了一个高级 API 来控制 Chrome 或 Chromium 浏览器。你可以使用它来生成 PDF 文件。

1. 安装依赖： npm install puppeteer
2. 创建一个 API 路由来生成 PDF： 在 pages/api 目录下创建一个新的 API 路由。 // pages/api/generate-pdf.js import puppeteer from 'puppeteer'; export default async function handler(req, res) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com', { waitUntil: 'networkidle2' }); const pdf = await page.pdf({ format: 'A4' }); res.setHeader('Content-Type', 'application/pdf'); res.setHeader('Content-Disposition', 'attachment; filename=example.pdf'); res.send(pdf); await browser.close(); }
3. 在页面中触发 PDF 生成： 在页面中添加一个按钮来触发 PDF 下载。 // pages/index.js import React from 'react'; const Home = () => ( <div> <h1>Generate PDF</h1> <button onClick={() => window.location.href = '/api/generate-pdf'}> Download PDF </button> </div> ); export default Home;

方法三：使用 html2pdf.js 库

html2pdf.js 是一个 JavaScript 库，可以将 HTML 内容转换为 PDF。你可以在客户端使用它来生成 PDF。

1. 安装依赖： npm install html2pdf.js
2. 在页面中使用 html2pdf.js 生成 PDF： // pages/index.js import React from 'react'; import html2pdf from 'html2pdf.js'; const Home = () => { const handleDownloadPDF = () => { const element = document.getElementById('pdf-content'); const opt = { margin: 10, filename: 'example.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } }; html2pdf().set(opt).from(element).save(); }; return ( <div> <h1>Generate PDF</h1> <div id="pdf-content"> <h2>Section 1</h2> <p>Some text...</p> <h2>Section 2</h2> <p>More text...</p> </div> <button onClick={handleDownloadPDF}>Download PDF</button> </div> ); }; export default Home;

以上是几种在 Next.js 中生成 PDF 的方法。你可以根据自己的需求选择最适合的方法。