如何将 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

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

一个 NPM 服务器端模块 - 更多选项可能
客户端 PDF 对象形成，很多挑战 - 客户端依赖性
使用服务 - 费用

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

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

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

如何将 Nextjs 页面导出为 pdf？

How can I export a Nextjs page as pdf?

javascript

reactjs

pdf

next.js

export-to-pdf