如何在使用react-pdf库创建的react中保存pdf？

问题描述

我正在创建一个React应用程序，在其中我必须生成一个pdf并在单击按钮时保存该pdf。 如何将该pdf保存在我的本地目录中？

CreatePdf.js

\usepackage{tgheros}
\renewcommand*\familydefault{\sfdefault} 
\usepackage[T1]{fontenc}

App.js

import React,{ Component } from 'react';
import { Document,Page,Text,View,StyleSheet,Image } from '@react-pdf/renderer';

class CreatePdf extends Component {
    constructor() {
        super();
        this.state = {
            styles: {} // all styles here
        }
    }

MyDocument = () => (
        <Document>
            <Page style={this.state.styles.body}>
                <Text style={this.state.styles.header} fixed>
                    ~ Created with react-pdf ~
                </Text>
            </Page>
        </Document>

    render() {
        return (
            <button onClick={(this.MyDocument,`${__dirname}/example.pdf`)}>Print PDF</button>
        )
    }
}
export default CreatePdf;

就目前而言，当我单击按钮时，什么也没有发生。像在 jsPDF 中一​​样，我们同样拥有render() { return ( <MyDocument /> ) } 如何保存该pdf文件？

解决方法

您可以使用PdfDownLoadLink包装文档以下载链接

import { PDFDownloadLink} from '@react-pdf/renderer';


<PDFDownloadLink document={<MyDocument />} fileName={"FileName"}> 

       <button> Download </button> 

</PDFDownloadLink>