Display signatures in a PDF document

As you know, React PDF Viewer uses the pdf.js libary to parse and render the document. Unfortunately, the library doesn't support display signatures.

This example lists the steps you can follow to fix the issue.

The component only displays the signatures. It doesn't verify the signatures shown in the document.

Install @react-pdf-viewer/pdfjs-dist-signature package

`@react-pdf-viewer/pdfjs-dist-signature` is a forked version of pdf.js, but it supports signatures.

$ npm install @react-pdf-viewer/pdfjs-dist-signature@2.5.207

Replace the pdfj-dist package

If you're using the Webpack bundler, then change your `webpack.config.js` as following:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    ...
    plugins: [
        // If you want to see the signature which is disabled by pdf.js, then you have to replace it
        // with `@react-pdf-viewer/pdfjs-dist-signature`
        new webpack.NormalModuleReplacementPlugin(
            /^pdfjs-dist$/,
            resource => {
                resource.request = path.join(__dirname, './node_modules/@react-pdf-viewer/pdfjs-dist-signature');
            },
        ),
    ],
};

Replace the worker path

Finally, we need to replace the pdf.js worker with the one provided by the `@react-pdf-viewer/pdfjs-dist-signature` package:

import { Worker } from '@react-pdf-viewer/core';

<Worker workerUrl="https://unpkg.com/@react-pdf-viewer/pdfjs-dist-signature@2.5.207/build/pdf.worker.js">...</Worker>;