useFileDownload
The useFileDownload
hook provides functionality to download the currently loaded PDF file within the React PDF.
It offers a simple way to trigger downloads of the PDF document being viewed, making it easy to add custom download buttons or other UI elements for downloading.
Return Type
Section titled “Return Type”Name | Type | Description |
---|---|---|
download | () => void | Download the PDF file |
To ensure the file download context can be accessed, you will need to use useFileDownload
inside a component which is a child of RPProvider
.
This example shows how to create a CustomDownloadButton
component which uses useFileDownload
hook to handle file downloads.
import { RPConfig, RPProvider, RPPages, RPDefaultLayout, useFileDownload } from '@pdf-viewer/react'
const CustomDownloadButton = () => { const { download } = useFileDownload() return ( <div> <button onClick={download}>Download!</button> </div> )}
export const AppPdfViewer = () => { return ( <RPConfig licenseKey={YOUR_LICENSE_KEY}> <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"> <CustomDownloadButton /> <RPDefaultLayout> <RPPages /> </RPDefaultLayout> </RPProvider> </RPConfig> )}
import { RPConfig, RPProvider, RPPages, RPDefaultLayout, useFileDownload } from '@pdf-viewer/react'import { type FC } from 'react'
const CustomDownloadButton: FC = () => { const { download } = useFileDownload() return ( <div> <button onClick={download}>Download!</button> </div> )}
export const AppPdfViewer: FC = () => { return ( <RPConfig licenseKey={YOUR_LICENSE_KEY}> <RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf"> <CustomDownloadButton /> <RPDefaultLayout> <RPPages /> </RPDefaultLayout> </RPProvider> </RPConfig> )}