Reactjs 如何使用react pdf单击下载pdf文件？

我想从UI生成pdf并下载它。正在查看文档，但找不到如何实现，即

onClick={this.downloadPdf}

以下是模块参考：

它说： 保存在文件中

import React from 'react';
import ReactPDF from '@react-pdf/react-pdf';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

从“React”导入React；
从“@react pdf/react pdf”导入ReactPDF；
ReactPDF.render（，`${uuu dirname}/example.pdf`）；

---

但这对我来说没有多大意义。

我在他们的网站上找到了以下内容

从'@react pdf/renderer'导入{PDFDownloadLink，文档，页面}
常量MyDoc=（）=>(
//我的文档数据
)
常量应用=（）=>(
{（{blob，url，loading，error}）=>（正在加载？'loading document…'：'Download now！'）
)

嗨，这对我来说很好

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { PDFDownloadLink, Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

const MyDoc = () => (
  <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>
);


function App() {
  return (
    <div className="App">
      <PDFDownloadLink document={<MyDoc />} fileName="somename.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
    </div>
  );
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“@react pdf/renderer”导入{PDFDownloadLink、页面、文本、视图、文档、样式表}；
const styles=StyleSheet.create({
第页：{
flexDirection:'行'，
背景颜色：“#e4”
},
第节：{
差额：10，
填充：10，
flexGrow:1
}
});
常量MyDoc=（）=>(
第1节
第2节
);
函数App（）{
返回(
{（{blob，url，loading，error}）=>（正在加载？'loading document…'：'Download now！'）
);
}
导出默认应用程序；

我认为您的问题中的示例是服务器端使用Node呈现PDF。我认为它没有用于下载PDF的api。您的pdf是来自服务器还是本地。如果它是本地的，您可以通过从“../files/myfile.pdf”导入pdf下载它，那么我的pdf将只是UI中的一个呈现组件。我该怎么做？我可以将其保存在客户端，还是必须是服务器，然后客户端才能下载？这是否适用于firebase store？使用上述答案时，请记住在文档组件中包含

视图

和

文本

。有关更多信息，请参见此处：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { PDFDownloadLink, Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

const MyDoc = () => (
  <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>
);


function App() {
  return (
    <div className="App">
      <PDFDownloadLink document={<MyDoc />} fileName="somename.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
    </div>
  );
}

export default App;