如何将 Nextjs 页面导出为 pdf？

Question

我在页面上有以下结构：

export default function FichaTecnica(props) {
  const data = props.data;
  return (
    <>
      <Container>
        <TopData info={data} />
        <DataSheet datasheet={data} />
        <GraphBox history={data} />
        <MapButton hasMap={data.mapa} />
      </Container>
    </>
  );
}

export async function getServerSideProps(context) {
  const idIndicador = context.params.idIndicador;
  const res = await fetch(
    `${process.env.INDICADORES_BASE_URL}/indicadores/${idIndicador}`
  );

  const data = await res.json();
  if (res.status === 200) {
    return {
      props: { ...data },
    };
  } else {
    return {
      props: {
        data: [],
      },
    };
  }
}

在自定义组件“”中，我有一个按钮列表，用于将页面信息导出为 Excel、Json、CSV 和 PDF。我已经完成了前三个按钮，但我不知道从哪里开始导出我的页面为 PDF。

我的想法是按原样导出它，这意味着我希望它具有与 CSS 和 Material UI 组件相同的样式，例如，如果网站看起来像这样：

PDF 文件应该是这样的，我知道我可以把它做成 Canva 并制作类似 Html > img > PDF 但我想允许用户 select PDF 中的页面文本。

如果您能给我一些想法，我将不胜感激！

Answer 1

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

1. 一个 NPM 服务器端模块 -可能有更多选项
2. 客户端 PDF object 形成，很多挑战 - 客户端依赖
3. 使用服务 - 成本

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

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

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

Answer 2

在服务器端使用puppeteer可能是一个不错的选择。

可以在 nextjs 中创建一个 API来生成 PDF 并传递回客户端。 像下面这样的东西应该是一个很好的起点：

import { NextApiRequest, NextApiResponse } from 'next';
import puppeteer from 'puppeteer';


const saveAsPdf = async (url: string) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(url, {
      waitUntil: 'networkidle0'
    });

  const result = await page.pdf({
    format: 'a4',
  });
  await browser.close();

  return result;
};

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { url } = req.query; // pass the page to create PDF from as param

  res.setHeader(
    'Content-Disposition',
    `attachment; filename="file.pdf"`
  );
  res.setHeader('Content-Type', 'application/pdf');

  const pdf = await saveAsPdf(url as string);

  return res.send(pdf);
};