React-pdf: How to open rendered PDF in a new tab

Created on 25 Sep 2018 · 7Comments · Source: diegomura/react-pdf

OS:
macOS High Sierra

React-pdf version:
"@react-pdf/renderer": "^1.0.0-alpha.17",

Description:
I am currently using PDFDownloadLink to download the PDF but is there an alternative way to open the rendered PDF in a new tab instead of downloading it? Maybe with <BlobProvider />?

Source

serkyen

👍3

Most helpful comment

Hey!
You can easily do that using the <BlobProvider /> as you suggested:

<BlobProvider document={MyDoc}>
  {({ url }) => (
    <a href={url} target="_blank">Open in new tab</a>
  )}
</BlobProvider>

Hope this helped!

diegomura on 26 Sep 2018

👍9

All 7 comments

Hey!
You can easily do that using the <BlobProvider /> as you suggested:

<BlobProvider document={MyDoc}>
  {({ url }) => (
    <a href={url} target="_blank">Open in new tab</a>
  )}
</BlobProvider>

Hope this helped!

diegomura on 26 Sep 2018

👍9

@diegomura @serkyen Where are BlobProvider and PDFDownloadLink from? From react-pdf?

zheoreh on 26 Sep 2018

Yes.

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

These are web only APIs

diegomura on 26 Sep 2018

@diegomura BlobProvider doesn't work properly for me. I take the pdf document from example (Readme) and push it into BlobProvider (on client / web) as you wrote above but I have no url, blob is empty. If I push the document next way document={\} I have another issue. Can you provide full an example please?

zheoreh on 26 Sep 2018

import { Document, Page, BlobProvider } from '@react-pdf/renderer';

 const MyDoc = (
  <Document>
    <Page> ... </Page>
  </Document>
);

const App = () => (
  <BlobProvider document={MyDoc}>
    {({ blob, url }) => (
      // return something using blob or url
    )}
  </BlobProvider>
);

This should do the trick. If it doesn't work, it would be better for you to share a snippet of code so I can see why is not working

diegomura on 26 Sep 2018

Sadly, I am not able to get it working in a new tab. I am using react with typescript.

a href has a type string or undefined, but url from react-pdf is string or null. Can anyone show me how I can fix this. thank you

//FIX
<a href={(url != null) ? url : ""} target="_blank">Open in new tab</a>

Paul6552 on 29 Aug 2019

Hi,
Is it possible to change the url? E.g. I don't want the document to be called 9b6cd832-4ae8-487c-a71a-0961709dd364.pdf when I click on save. I prefer to call it something based on the user attributes e.g. username.pdf.
Thanks