The following approach worked for me.

import ExampleDoc from '......src/assets/files/exampleDoc.pdf'

<a href={ExampleDoc} download="MyExampleDoc" target='_blank'>
   <Button className={classes.navLink}>My Example Doc</Button>
</a>

I have found below in their site documentation

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

const MyDoc = () => (
  <Document>
    <Page>
      // My document data
    </Page>
  </Document>
)

const App = () => (
  <div>
    <PDFDownloadLink document={<MyDoc />} fileName="somename.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
  </div>
)

hey @geeky01adarsh, I believe you just don't want to display it right? In that case, you could use the @react-pdf/renderers pdf method and the file-saver package to achieve this.

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

const DownloadButton = () => {
  const downloadPdf = async () => {
    const fileName = 'test.pdf';
    const blob = await pdf(<YourDocument />).toBlob();
    saveAs(blob, fileName);
  };

  return <button onClick={downloadPdf}>Download PDFbutton>;
};

export default DownloadButton;

this will convert your pdf component into a Blob and then saves it using saveAs method from file-saver

Hi @mn-prp,

I achieved what you want using a third-party file saver to save the current blob data we can get from react-pdf's pdf method,

so basically you could do something like below

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

const Download = () => {
  const handleDownload = async () => {
    const blob = await pdf(<YourDocument />).toBlob()
    saveAs(blob, 'untitled.pdf')
  }

  return <button onClick={handleDownload}>Downloadbutton>
}

export default Download

let me know how it goes,
cheers

I have created a workaroud using file-saver package

my button:

<button onClick={this.submitForm}>Send</button>

and submitForm method:

submitForm = async (event) => {
    event.preventDefault(); // prevent page reload
    const blob = await pdf(
        <MyDoc />
    ).toBlob();

    saveAs(blob, 'wycena.pdf');
}

just checked on my code, seems you need to place a tag inside the button not above:

<button>
    <a
        href='/pathToPdf.pdf'
        target='_blank'
        rel='noopener noreferrer'
    >
        RESUME
    </a>
</button>