Merge pull request #10963 from allenve/feat-pdfwokerjs

feat: pdfjsWorkerSrc 修改使用方式

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

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

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

packages/amis-core/src/env.tsx

@@ -140,11 +140,6 @@ export interface RendererEnv {
    */
   enableTestid?: boolean;
 
-  /**
-   * pdfjs worker 地址，用于渲染 pdf
-   */
-  pdfjsWorkerSrc?: string;
-
   /**
    * 替换文本，用于实现 URL 替换、语言替换等
    */

packages/amis-core/src/factory.tsx

@@ -634,3 +634,19 @@ export function getRendererByName(name: string) {
 }
 
 export {RendererEnv};
+
+export interface IGlobalOptions {
+  pdfjsWorkerSrc: string;
+}
+
+const GlobalOptions: IGlobalOptions = {
+  pdfjsWorkerSrc: ''
+};
+
+export function setGlobalOptions(options: Partial<IGlobalOptions>) {
+  Object.assign(GlobalOptions, options);
+}
+
+export function getGlobalOptions() {
+  return GlobalOptions;
+}

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(

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<PdfViewerProps> = 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<PdfViewerProps> = props => {
   const [total, setTotal] = React.useState(1);
   const inputRef = React.useRef<HTMLInputElement>();
 
-  React.useEffect(() => {
-    pdfjsWorkerSrc && (pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorkerSrc);
-  }, [props.pdfjsWorkerSrc]);
-
   React.useEffect(() => {
     if (props.file instanceof ArrayBuffer && props.file.byteLength > 0) {
       setFile(props.file);

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<
       <div>
         <p>
           [PdfViewer]: pdfjsWorkerSrc is required, Please set the
-          `pdfjsWorkerSrc` in env.
+          `pdfjsWorkerSrc` in setGlobalOptions function.
         </p>
       </div>
     );
@@ -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<
           <Suspense fallback={<div>...</div>}>
             {inited && !error ? (
               <PdfView
-                pdfjsWorkerSrc={pdfjs}
                 file={this.file}
                 loading={loading}
                 className={className}