reactjs 如何使用react-pdf自动保存文件

sz81bmfz 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(168)

大家晚上好，我正在创建一个react应用程序（嵌入到WordPress网站中，以防万一你需要这些信息），它可以从表单中获取一些数据，然后通过react-pdf模块（https://github.com/diegomura/react-pdf）创建一个pdf文件。
为了使react-pdf与React 18.2.0兼容，我在package.json文件中添加了几行，如下所示（https://gist.github.com/gitname/bdc1fb7fe5bd0c22f6656b7905f57cd6）：

"overrides": {
  "@react-pdf/renderer": {
    "react": "^18.2.0"
  }
 },

此文件必须存储在服务器中的某个位置，而不向用户提供任何同意消息。
我尝试使用usePDF钩子（https://react-pdf.org/hooks）来获取instance.blob内容，但现在我不知道如何存储它。

import React from "react";
import { usePDF, Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";

// Create styles
const styles = StyleSheet.create({ ... something ...});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, reprehenderit! 
        </Text>
      </View>
      <View style={styles.section}>
        <Text>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </Text>
      </View>
    </Page>
  </Document>
);

const MyPdfComponent = () => {
  const [instance, updateInstance] = usePDF({ document: <MyDocument /> });
 
  if (instance.loading) return <div>Loading ...</div>;
 
  if (instance.error) return <div>Something went wrong: {instance.error}</div>;

  if (instance.blob) {
    /* What can I put here? */

    return <div>PDF have been generated...</div>;
  }
};

export default MyPdfComponent;

根据官方文档，我第一次尝试使用这段代码：

import ReactPDF from '@react-pdf/renderer';
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

但是出了点问题，因为我有一条消息告诉我**“render是Node特定的API。你要么在浏览器中使用此方法，要么你的bundler没有从适当的Web构建中加载react-pdf。"**
我只需要该文件以编程方式存储在一个特定的文件夹中，用户被重定向到一个成功的页面（或我必须实现的东西…）
对此有什么提示吗？
太感谢你了！

reactjs

来源：https://stackoverflow.com/questions/75008302/how-to-automatically-save-a-file-using-react-pdf

2条答案

按热度按时间

ilmyapht1#

如果你使用的是Next.JS，你必须只在客户端渲染这个组件，钩子usePDF只在客户端工作。
你必须像这样导入组件：

import dynamic from "next/dynamic";

const MyDocument = dynamic(async () => {
  const m = await import("path/to/MyDocument");

  // if no default export
  return m.MyDocument;

  // if default export
  return m.default;
},{ ssr:false });

赞(0）回复(0）举报 2023-04-20

ih99xse12#

你需要一个允许你保存文件的软件包。“react-pdf”生成PDF，“file-saver”允许你下载它。
参见示例代码：

import { saveAs } from 'file-saver';
import { Page, Text, View, Document, StyleSheet, pdf } from '@react-pdf/renderer';

function savePDF() {
  try {
    const doc = (
      <Document>
        <Page>
          <Text>Hello, World!</Text>
        </Page>
      </Document>
    );

    const asPdf = pdf([]); // {} is important, throws without an argument
    asPdf.updateContainer(doc);
    const pdfBlob = asPdf.toBlob();
    saveAs(pdfBlob, 'document.pdf');
  } catch (error) {
    console.error(error);
    alert('Error generating PDF');
  }
}

function MyComponent() {
  return (
    <div>
      <button onClick={savePDF}>Save PDF</button>
    </div>
  );
}

export default MyComponent;

还有另一个更高级的版本，用于更大的文件，叫做“streamsaver”。但是file-saver应该能很好地满足你的预期目的。
您还可以使用自定义样式表来设置文本和视图的样式。

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 如何使用react-pdf自动保存文件

2条答案

相关问题

热门标签

最新问答