0

I am creating a "Preview Document" button, that takes text from multiple textareas and combines them into a PDF with help of the react-pdf and react-pdf-html packages. This is working fine so far.

Question: how can I make it open in a new tab instead of downloading the document?

I have created a component to create the PDF document (pages is used as a state variable to store content as an array)

// Create Document Component
const MyDocument = ({ pages }) => (
    <Document>
        {pages.map((page, index) => (
            <Page size="A4" key={index}>
                <Html>{page}</Html>
            </Page>
        ))}
    </Document>
);

And using this component to download the file on the button click

<Button variant="outlined">
    <PDFDownloadLink
        document={<MyDocument pages={docData.pages} />}
        fileName={`${docData.transdocs_name || "preview"}.pdf`}
    >
        {({ blob, url, loading, error }) =>
            loading
                ? "Creating Preview..."
                : "Preview Document"
        }
    </PDFDownloadLink>
</Button>

Note: I know the PDFDownloadLink component is meant to download the document, but I am not sure which component I should use for preview instead.

Alok Jain
  • 3,379
  • 3
  • 23
  • 42

0 Answers0