Attachment plugin

The attachment plugin lists all attachments of a PDF document.

Install

npm install '@react-pdf-viewer/attachment';

Usage

  • Import the plugin and styles:
import { attachmentPlugin } from '@react-pdf-viewer/attachment';

// Import styles
import '@react-pdf-viewer/attachment/lib/styles/index.css';
  • Create the plugin instance:
const attachmentPluginInstance = attachmentPlugin();

The plugin instance attachmentPluginInstance provides the following property:

PropertyTypeDescriptionFrom
AttachmentsComponentThe component lists available attachments2.0.0
  • Finally, register the attachment plugin instance, and use the <Attachments /> component to list all attachments.

In the following sample code, the attachments are listed on the left side. The right side displays the current PDF document.

// Your render function
return (
    <div
        style={{
            border: '1px solid rgba(0, 0, 0, 0.3)',
            display: 'flex',
            height: '100%',
        }}
    >
        <div
            style={{
                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
                overflow: 'auto',
                width: '30%',
            }}
        >
            <Attachments />
        </div>
        <div style={{ flex: 1 }}>
            <Viewer
                fileUrl='/assets/pdf-with-attachment.pdf'
                plugins={[
                    // Register the attachment plugin
                    attachmentPluginInstance,
                ]}
            />
        </div>
    </div>
);

You can click on each attachment name to download it.

The sample document is taken from tcpdf

(The sample code)

  • utf8test.txt
TCPDF Example 041by Nicola Asuni - Tecnick.comwww.tcpdf.orgExample of File Attachment.Double click on the icon to open the attached file.Powered by TCPDF (www.tcpdf.org) page 1 / 1