如何使用 NextJs 将 div 导出为格式化 PDF

Question

我有一个应用程序项目，我们在其中填写表格，信息将自动格式化在 div 中以创建标签（CLP 标签），因此我希望能够以 pdf 格式导出此 Div 并可以选择大小（横向格式从 A5 到 A8）

对于这个项目，我使用 Next.js 和 tailwind css。

我的问题是：如何使用 NextJs 导出 pdf 格式的 div？

谢谢！

Answer 1

有几种方法可以做到这一点

1. NPM 服务器端模块 - 更多选项 可能
2. 客户端 PDF 对象形成，许多挑战 - 客户端依赖项
3. 使用服务 - 费用

对于＃1 - 尝试类似的东西 - https://www.npmjs.com/package/html-pdf?activeTab=readme

对于 #2 - https://github.com/parallax/jsPDF

对于 #3 - https://www.htmlpdfapi.com/

摘自我之前的文章 - 如何将 Nextjs 页面导出为 pdf？

Answer 2

您可以使用 Puppeteer https://www.npmjs.com/package/puppeteer

像这样的网址

const puppeteer = require('puppeteer');

async function generatePDF(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.pdf({ path: outputPath, format: 'A4' });
  await browser.close();
}

// Usage
generatePDF('https://google.com', 'google.pdf')
  .then(() => console.log('PDF generated successfully'))
  .catch(err => console.error('Error generating PDF:', err));

对于自定义 HTMl 来说就像这样

const puppeteer = require('puppeteer');

async function generatePDFfromHTML(htmlContent, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(htmlContent);
  await page.pdf({ path: outputPath, format: 'A4' });
  await browser.close();
}

// Usage
const htmlContent = '<h1>Hello World</h1><p>This is custom HTML content.</p>';
generatePDFfromHTML(htmlContent, 'custom.pdf')
  .then(() => console.log('PDF generated successfully'))
  .catch(err => console.error('Error generating PDF:', err));