Example: Use the default download button
The following example uses the default download button <DownloadButton /> provided by the Get File plugin.
import { Viewer } from '@react-pdf-viewer/core';
import { getFilePlugin } from '@react-pdf-viewer/get-file';
// Your render function
const getFilePluginInstance = getFilePlugin();
const { DownloadButton } = getFilePluginInstance;
return (
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: '#eeeeee',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
padding: '4px',
}}
>
<DownloadButton />
</div>
<div
style={{
flex: 1,
overflow: 'hidden',
}}
>
<Viewer
fileUrl='/assets/pdf-open-parameters.pdf'
plugins={[
getFilePluginInstance,
]}
/>
</div>
</div>
);