volto-pdf-块

沃尔多 加载

特征

• 沃尔多的灵活PDF集成.

注:这个加词假设,如果你试图装入外部主机PDF 文件,您将使用 @eeacms/volto-corsproxy (英语)

开始

用 Docker 尝试 volto- pdf 块

  git clone https://github.com/eea/volto-pdf-block.git
  cd volto-pdf-block
  make
  make start

转到 http://localhost:3:00

在您的 Volto 项目中添加 volto- pdf- block

1. 确保你有 Plone 后端 在http://localhost:8080/Plone上运行

   docker compose up backend
   

2. 启动 Volto 前端

• 如果你已经有伏尔托项目,只需更新 package.json数字 :

  "addons": [
      "@eeacms/volto-pdf-block"
  ],
  
  "dependencies": {
      "@eeacms/volto-pdf-block": "*"
  }
  

• 如果没有,请创建:

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

1. 安装新加载并重新启动 Volto :

   yarn
   yarn start
   

2. 转到 http://localhost:3:00

3. 剪辑愉快!

PDF 库的内部使用

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>
)}

工人网络

允许您为 pdf 工人指定自己的 URL . 默认由库设置为:

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

对于需要将库放在不同的 CDN 上的情况,可以配置在 config.settings.pdfWorkerSrc 如何做到这一点 自愿政策 它是一个加法,它为不同的加法提供了伏尔多的配置.

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

释放

见 发 言。 。 。 .

如何捐款

见 发达国家d。 。 。 .

版权和许可证

原始守则的初始所有人是欧洲环境署. 所有权利保留.

见 利比里亚 详细情况.

供资

欧洲环境署(欧盟)