How to save pdf in react created using react-pdf library?

Question

I am creating a React application in which I have to generate a pdf and save that pdf when clicking a button. How can I save this pdf in my local directory ?

CreatePdf.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;

App.js

render() {
    return (
         <MyDocument />
    )
}

As for now, when I click on the button, nothing happens. Like in jsPDF we have .save() similarly how we can save this pdf ?

Mohammad Faisal · Accepted Answer · 2020-09-30 07:34:21Z

10

you can wrap your document with PdfDownLoadLink to download the link

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


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

       <button> Download </button> 

</PDFDownloadLink>

answered Sep 30, 2020 at 7:34

Mohammad Faisal

2,3771 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to save pdf in react created using react-pdf library?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related