Example: List attachments

This example demonstrates how we can list attachments of a PDF document by using the attachment plugin.

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

import { attachmentPlugin } from '@react-pdf-viewer/attachment';
import '@react-pdf-viewer/attachment/lib/styles/index.css';

const attachmentPluginInstance = attachmentPlugin();

// Render
        border: '1px solid rgba(0, 0, 0, 0.3)',
        display: 'flex',
        height: '100%',
            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
            overflow: 'auto',
            width: '30%',
        <Attachments />
    <div style={{ flex: 1 }}>
                // Register the attachment plugin

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