React-pdf: Open renderer link on new window

[finbar123]

Excellent library

Would it be possible to add the ability to make the rendered link in the pdf open in a new window

Something like <Link src={"www.google.com"} target={"_blank"}>{"Google"}</Link>

Apologies if this is already possible couldn't see from the documentation

Thanks

Finbar

[jp06]

Isn't there a Link component in the documentation? Check out the components available in the library: https://react-pdf.org/components

[finbar123]

Jp06

Hi yes we are using the Link component to render the link inside the PDF and it works fine.

We use the PDFViewer component to display the rendered PDF but when the actual link is clicked the linked page opens in the existing browser window, we would prefer it opens in a new window. I guess I am assuming that that target=_blank functionality is supported in a PDF ?

Regards

Finbar

[jp06]

It's the way how you wrote it, "rendered link in the pdf". Came across this thread just yesterday also looking for the same solution, you might be referring to this: https://github.com/diegomura/react-pdf/issues/318

[finbar123]

jp06

Hi yes I saw that but not sure that helps it will show the entire PDF in a new window, the use case we have is clicking a link in the rendered PDF the link should open in a new window, not the one the PDF is displayed in

Regards

Finbar

From: jp06 [mailto:[email protected]]
Sent: 20 June 2019 09:56
To: diegomura/react-pdf
Cc: finbar123; Author
Subject: Re: [diegomura/react-pdf] Open renderer link on new window (#645)

Came across this thread just yesterday, you might be referring to this: #318 https://github.com/diegomura/react-pdf/issues/318

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/diegomura/react-pdf/issues/645?email_source=notifications&email_token=AAJGGHL45P4GFTAQJOBDCD3P3NAZVA5CNFSM4HZL2RYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYEYQHQ#issuecomment-503941150 , or mute the thread https://github.com/notifications/unsubscribe-auth/AAJGGHLD3GINMHSUNBATH4LP3NAZVANCNFSM4HZL2RYA .Image removed by sender.

[jp06]

It is working. The returned anchor tag should open the PDF in new tab when clicked.

My code looks like this:

import React from 'react'
import { BlobProvider } from '@react-pdf/renderer'
import Receipt from '../Receipt' // `Receipt` has the document component

const ViewReceipt = () => (
  <BlobProvider document={Receipt}>
    {({ url }) => (
      <a className="button" href={url} target="_blank" rel="noopener noreferrer">
        Open in New Tab
      </a>
    )}
  </BlobProvider>
)

export default ViewReceipt

Edit: Above renders an anchor tag (or link) decorated as a button that opens the rendered PDF in a new tab. It is not a working example of course, just note that Receipt contains the Document component.

[psnfrench]

I would love to see this functionality too. As @finbar123 describes, I would like the link that is rendered inside the pdf to have target="_blank" so clicking on the link from within the rendered pdf opens a new tab.

Note: this is different functionality from opening the entire pdf document in a new tab as described by @jp06

[jp06]

I'm sorry. Reading more carefully now, I totally missed his point. I thought he meant the link to the PDF but instead, it is the link inside the PDF that he wants a target="_blank".

[SomnathKadam]

If you need to open generated pdf on new window, without click on download link, use below code

const PrintDoc = ({ values }) => (
    <Document>
        <Page size="A6" style={styles.page}>
            <View style={styles.section}>
                <Text>Section #1</Text>
            </View>

        </Page>
    </Document>
);

const openPDF = (url) => {
    window.open(url, '_blank');
};

export const PDFPrint = () => {
    return (
        <PDFDownloadLink document={<PrintDoc />} fileName="somename.pdf">
            {({ blob, url, loading, error }) =>
                loading ? 'Loading document...' : openPDF(url)
            }
        </PDFDownloadLink>
    );
};

[asokr]

SomnathKadam,
read previous comment please, it's not an answer too...

To open rendered links in new tab/window I'm using handler on parent div, witch catch all clicks on rendered pdf, then just use if statement - to know if target is link or not:

 openLinkInNewTab = (e) => {
        e.preventDefault();
        if (e.target.tagName.toLowerCase() === 'a') {
            window.open( e.target.href );
        }
    }

md5-ccee35c599e6260f61783ebe085ae757