question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PDFDownloadLink should generate pdf on click

See original GitHub issue

Is your feature request related to a problem? Please describe. It is an improvement. At the moment, if you use ‘PDFDownloadLink’ the PDF is being generated as the component loads.

Describe the solution you’d like It is not mandatory, but having multiple heavy PDFs ready to be downloaded wouldn’t be the best approach since not every user will need it.

Describe alternatives you’ve considered I’ve used pdf() function to generate the blob and file-saver lib to download it:

import { saveAs } from 'file-saver';
import { pdf } from '@react-pdf/renderer';
import PdfDocument from '../PdfDocument';

const generatePdfDocument = async (documentData) => {
        const blob = await pdf((
            <PdfDocument
                title='My PDF'
                pdfDocumentData={documentData}
            />
        )).toBlob();
        saveAs(blob, fileName);
};

export default generatePdfDocument;```

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:128
  • Comments:23

github_iconTop GitHub Comments

6reactions
cmnstmntmncommented, Jul 8, 2020

hmm, i’m trying the code snippet above, but for some reason it trows an err

import React from "react";
import { saveAs } from "file-saver";
import { pdf, Document, Page } from "@react-pdf/renderer";

const generatePDFDocument = async () => {
  const blob = await pdf(
    <Document>
      <Page>// My document data</Page>
    </Document>
  ).toBlob();

  console.log(blob);

  saveAs(blob, "pageName");
};

export default generatePDFDocument;
Uncaught (in promise) TypeError: Cannot read property 'slice' of undefined
3reactions
cmnstmntmncommented, Jul 9, 2020

@Pat1420 that’s very curious because i have no other promises. it’s just a click event that’s calling generatePDFDocument

              <button onClick={() => generatePDFDocument("doc name")}>
                download
              </button>
Read more comments on GitHub >

github_iconTop Results From Across the Web

generate pdf on click button in react js - Stack Overflow
I'm searching data from db and results displays in table form.Then user can download pdf of any record ...
Read more >
Generating PDFs in React with react-pdf - LogRocket Blog
It is an open source, easy-to-use library that allows developers to generate PDF documents in a React environment. In this article, you will...
Read more >
Generating Pdf documents in React Using React-pdf
PDFDownloadLink accepts a document props which are the PDF template we will be creating soon using some of the React-primitives listed early ...
Read more >
Generate Dynamic PDF With Custom Style In React - C# Corner
We will also understand the basic components of the React-pdf library with real life ... Click on the Generate button to generate the...
Read more >
Page wrapping - React-pdf
zoom (Optional), Reader zoom value after clicking on the bookmark, Number ... If that's the case, you can use <PDFDownloadLink /> to easily...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found