@eeacms/volto-pdf-block NPM

volto-pdf-block

Features

Flexible PDF integration in Volto.

NOTE: this addon assumes that, if you're trying to load external hosted PDF files, you will be using @eeacms/volto-corsproxy

Getting started

Add volto-pdf-block to your Volto project

Make sure you have a Plone backend up-and-running at http://localhost:8080/Plone
Start Volto frontend

If you already have a volto project, just update package.json:

"addons": [
    "@eeacms/volto-pdf-block"
],

"dependencies": {
    "@eeacms/volto-pdf-block": "*"
}

If not, create one:

npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --canary --addon @eeacms/volto-pdf-block
cd my-volto-project

Install new add-ons and restart Volto:
```
yarn
yarn start
```
Go to http://localhost:3000
Happy editing!

Internal use of PDF library

import config from '@plone/volto/registry';
import PDF from '@mikecousins/react-pdf';


export const PdfViwer = (props) => {

return (
  <PDF
    file={source.file || source.url}
    content={source.base64}
    binaryContent={source.binary}
    documentInitParameters={source.connection}
    page={page}
    scale={scale}
    onPageRenderSuccess={onPageRenderSuccess}
    onPageRenderFail={onPageRenderFail}
    workerSrc={config.settings.pdfWorkerSrc}
    onDocumentLoadSuccess={onDocumentComplete}
  >
    {({ pdfDocument, pdfPage, canvas }) => (
    <>
      {!pdfDocument && loaderComponent(canvas)}
      {pdfDocument && canvas}
    </>
    )}
  </PDF>
)}

workerSrc

Allows you to specify your own url for the pdf worker. Default is set by the library to:

"//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js"

For cases where it is needed to have the library on a different CDN this can be configured on config.settings.pdfWorkerSrc the way it is done on volto-ims-policy which is an add-on that centrilazes configurations for Volto for different add-ons.

const applyConfig = (config) => {
  ...
  // PDF worker url
  config.settings.pdfWorkerSrc = '//www.eea.europa.eu/pdfjs/pdf.worker.min.js';
  return config;
};