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
Name | Type | Description |
---|---|---|
download | () => void | Download the PDF file |
Usage
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> )}