From 236d3b08738bb435192337b6c11c32ebc861d1c3 Mon Sep 17 00:00:00 2001 From: allenve Date: Tue, 24 Sep 2024 20:01:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20pdfjsWorkerSrc=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/start/getting-started.md | 34 ------------------- examples/components/SchemaRender.jsx | 18 ++++++---- examples/embed.tsx | 7 ++-- packages/amis-core/src/env.tsx | 5 --- packages/amis-core/src/factory.tsx | 16 +++++++++ packages/amis-core/src/index.tsx | 8 +++-- packages/amis-ui/src/components/PdfViewer.tsx | 9 ++--- packages/amis/src/renderers/PdfViewer.tsx | 8 ++--- 8 files changed, 45 insertions(+), 60 deletions(-) diff --git a/docs/zh-CN/start/getting-started.md b/docs/zh-CN/start/getting-started.md index 646055992..13db75b74 100644 --- a/docs/zh-CN/start/getting-started.md +++ b/docs/zh-CN/start/getting-started.md @@ -870,37 +870,3 @@ Toast 提示弹出位置，默认为`'top-center'`。 #### loadTinymcePlugin 可以用来加载 tinymce 插件，每次渲染 tinymce 的时候执行，可以用来加载 tinymce 插件。 - -#### pdfjsWorkerSrc - -渲染 pdf 时，需要加载 worker.js，可以使用 CDN 地址，也可以使用本地文件。 - -```javascript -import {pdfjs} from 'react-pdf'; - -// 本地文件 -const pdfJsUrl = new URL( - 'pdfjs-dist/build/pdf.worker.min.mjs', - import.meta.url -).toString(); - -// CDN 地址 -const pdfJsUrl1 = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; - -let amisScoped = amis.embed( - '#root', - { - type: 'page', - body: { - type: 'pdf-viewer', - id: 'pdf-viewer', - src: '/examples/static/simple.pdf', - width: 500 - } - }, - {}, - { - pdfjsWorkerSrc: pdfJsUrl // pdfJsUrl1 - } -); -``` diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index 49c57a863..83c291961 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -5,8 +5,15 @@ import Portal from 'react-overlays/Portal'; import {normalizeLink} from 'amis-core'; import {withRouter} from 'react-router-dom'; import copy from 'copy-to-clipboard'; -import {qsparse, parseQuery, attachmentAdpator} from 'amis-core'; +import { + qsparse, + parseQuery, + attachmentAdpator, + supportsMjs, + setGlobalOptions +} from 'amis-core'; import isPlainObject from 'lodash/isPlainObject'; +import {pdfUrlLoad} from '../loadPdfjsWorker'; function loadEditor() { return new Promise(resolve => @@ -16,6 +23,10 @@ function loadEditor() { const viewMode = localStorage.getItem('amis-viewMode') || 'pc'; +setGlobalOptions({ + pdfjsWorkerSrc: supportsMjs() ? pdfUrlLoad() : '' +}); + /** * * @param {*} schema schema配置 @@ -247,11 +258,6 @@ export default function (schema, schemaProps, showCode, envOverrides) { }); }, // 是否开启测试 testid - // enableTestid: true, - // pdfjsWorkerSrc: new URL( - // 'pdfjs-dist/build/pdf.worker.min.mjs', - // import.meta.url - // ).toString(), ...envOverrides }; diff --git a/examples/embed.tsx b/examples/embed.tsx index de9eeeb6e..063f5de8e 100644 --- a/examples/embed.tsx +++ b/examples/embed.tsx @@ -23,11 +23,15 @@ import 'amis-ui/lib/themes/antd'; import 'amis-ui/lib/themes/dark'; import 'history'; -import {attachmentAdpator} from 'amis-core'; +import {attachmentAdpator, setGlobalOptions} from 'amis-core'; import {pdfUrlLoad} from './loadPdfjsWorker'; import type {ToastLevel, ToastConf} from 'amis-ui/lib/components/Toast'; +setGlobalOptions({ + pdfjsWorkerSrc: supportsMjs() ? pdfUrlLoad() : '' +}); + export function embed( container: string | HTMLElement, schema: any, @@ -254,7 +258,6 @@ export function embed( richTextToken: '', affixOffsetBottom: 0, customStyleClassPrefix: '.amis-scope', - pdfjsWorkerSrc: supportsMjs() ? pdfUrlLoad() : '', ...env }; diff --git a/packages/amis-core/src/env.tsx b/packages/amis-core/src/env.tsx index 5ef120061..7fb92a688 100644 --- a/packages/amis-core/src/env.tsx +++ b/packages/amis-core/src/env.tsx @@ -140,11 +140,6 @@ export interface RendererEnv { */ enableTestid?: boolean; - /** - * pdfjs worker 地址，用于渲染 pdf - */ - pdfjsWorkerSrc?: string; - /** * 替换文本，用于实现 URL 替换、语言替换等 */ diff --git a/packages/amis-core/src/factory.tsx b/packages/amis-core/src/factory.tsx index 67ca2faf2..56979e792 100644 --- a/packages/amis-core/src/factory.tsx +++ b/packages/amis-core/src/factory.tsx @@ -610,3 +610,19 @@ export function getRendererByName(name: string) { } export {RendererEnv}; + +export interface IGlobalOptions { + pdfjsWorkerSrc: string; +} + +const GlobalOptions: IGlobalOptions = { + pdfjsWorkerSrc: '' +}; + +export function setGlobalOptions(options: Partial) { + Object.assign(GlobalOptions, options); +} + +export function getGlobalOptions() { + return GlobalOptions; +} diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx index 2d9172689..4a6d848aa 100644 --- a/packages/amis-core/src/index.tsx +++ b/packages/amis-core/src/index.tsx @@ -22,7 +22,9 @@ import { stores, defaultOptions, addSchemaFilter, - extendDefaultEnv + extendDefaultEnv, + getGlobalOptions, + setGlobalOptions } from './factory'; import type { RenderOptions, @@ -220,7 +222,9 @@ export { CustomStyle, enableDebug, disableDebug, - envOverwrite + envOverwrite, + getGlobalOptions, + setGlobalOptions }; export function render( diff --git a/packages/amis-ui/src/components/PdfViewer.tsx b/packages/amis-ui/src/components/PdfViewer.tsx index f16676c6d..cd050ae53 100644 --- a/packages/amis-ui/src/components/PdfViewer.tsx +++ b/packages/amis-ui/src/components/PdfViewer.tsx @@ -5,14 +5,14 @@ */ import React from 'react'; -import {themeable, ThemeProps} from 'amis-core'; +import {themeable, ThemeProps, getGlobalOptions} from 'amis-core'; import {Document, Page, pdfjs} from 'react-pdf'; import {Icon} from './icons'; import Input from './Input'; import Spinner from './Spinner'; +pdfjs.GlobalWorkerOptions.workerSrc = getGlobalOptions().pdfjsWorkerSrc; export interface PdfViewerProps extends ThemeProps { - pdfjsWorkerSrc: string; file?: ArrayBuffer; width?: number; height?: number; @@ -21,7 +21,6 @@ export interface PdfViewerProps extends ThemeProps { } const PdfViewer: React.FC = props => { - const pdfjsWorkerSrc = props.pdfjsWorkerSrc; const {classnames: cx, className, loading, width = 300} = props; const [file, setFile] = React.useState(props.file); const [loaded, setLoaded] = React.useState(false); @@ -30,10 +29,6 @@ const PdfViewer: React.FC = props => { const [total, setTotal] = React.useState(1); const inputRef = React.useRef(); - React.useEffect(() => { - pdfjsWorkerSrc && (pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorkerSrc); - }, [props.pdfjsWorkerSrc]); - React.useEffect(() => { if (props.file instanceof ArrayBuffer && props.file.byteLength > 0) { setFile(props.file); diff --git a/packages/amis/src/renderers/PdfViewer.tsx b/packages/amis/src/renderers/PdfViewer.tsx index 25d54356b..518cc3a74 100644 --- a/packages/amis/src/renderers/PdfViewer.tsx +++ b/packages/amis/src/renderers/PdfViewer.tsx @@ -13,7 +13,8 @@ import { Renderer, RendererProps, resolveVariableAndFilter, - ScopedContext + ScopedContext, + getGlobalOptions } from 'amis-core'; import {BaseSchema} from '../Schema'; @@ -244,7 +245,7 @@ export default class PdfViewer extends React.Component<

[PdfViewer]: pdfjsWorkerSrc is required, Please set the - `pdfjsWorkerSrc` in env. + `pdfjsWorkerSrc` in setGlobalOptions function.

); @@ -258,7 +259,7 @@ export default class PdfViewer extends React.Component< height, background } = this.props; - const pdfjs = this.props.env.pdfjsWorkerSrc; + const pdfjs = getGlobalOptions().pdfjsWorkerSrc; const {loading, inited, error} = this.state; const width = Math.max(this.props.width || this.state.width, 300); @@ -271,7 +272,6 @@ export default class PdfViewer extends React.Component< ...}> {inited && !error ? (