feat: pdfWokerJs 修改为env引入

docs/zh-CN/start/getting-started.md

@@ -870,3 +870,37 @@ Toast 提示弹出位置，默认为`'top-center'`。
 #### loadTinymcePlugin
 
 可以用来加载 tinymce 插件，每次渲染 tinymce 的时候执行，可以用来加载 tinymce 插件。
+
+#### pdfjsWorkerSrc
+
+渲染 pdf 时，需要加载 worker.js，可以使用 CND 地址，也可以使用本地文件。
+
+```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

@@ -248,6 +248,10 @@ 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
         };
 

packages/amis-core/src/env.tsx

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

packages/amis-ui/src/components/PdfViewer.tsx

@@ -7,14 +7,12 @@
 import React from 'react';
 import {themeable, ThemeProps} from 'amis-core';
 import {Document, Page, pdfjs} from 'react-pdf';
-
 import {Icon} from './icons';
 import Input from './Input';
 import Spinner from './Spinner';
-import * as pdfJSWorkerURL from 'pdfjs-dist/build/pdf.worker.min';
-pdfjs.GlobalWorkerOptions.workerSrc = pdfJSWorkerURL;
 
 export interface PdfViewerProps extends ThemeProps {
+  pdfjsWorkerSrc: string;
   file?: ArrayBuffer;
   width?: number;
   height?: number;
@@ -23,15 +21,19 @@ 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);
   const [page, setPage] = React.useState(1);
   const [scale, setScale] = React.useState(1);
   const [total, setTotal] = React.useState(1);
-  const wrapper = React.useRef<HTMLDivElement>(null);
   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);
@@ -112,7 +114,7 @@ const PdfViewer: React.FC<PdfViewerProps> = props => {
   }
 
   return (
-    <div className={cx(className, 'PdfViewer')} ref={wrapper}>
+    <div className={cx(className, 'PdfViewer')}>
       {!file || loading ? (
         renderLoading()
       ) : (
@@ -121,6 +123,7 @@ const PdfViewer: React.FC<PdfViewerProps> = props => {
             <Document
               file={file}
               onLoadSuccess={handleLoadSuccess}
+              onLoadError={err => console.log(err)}
               loading={renderLoading()}
             >
               <Page

packages/amis/src/renderers/PdfViewer.tsx

@@ -238,34 +238,52 @@ export default class PdfViewer extends React.Component<
     return null;
   }
 
+  @autobind
+  renderTip() {
+    return (
+      <div>
+        <p>
+          [PdfViewer]: pdfjsWorkerSrc is required, Please set the
+          `pdfjsWorkerSrc` in env.
+        </p>
+      </div>
+    );
+  }
+
   render() {
     const {
       className,
       classnames: cx,
       translate: __,
       height,
-      background,
-      src
+      background
     } = this.props;
+    const pdfjs = this.props.env.pdfjsWorkerSrc;
     const {loading, inited, error} = this.state;
     const width = Math.max(this.props.width || this.state.width, 300);
 
     return (
       <div ref={this.wrapper}>
         {this.renderEmpty()}
-        <Suspense fallback={<div>...</div>}>
-          {inited && !error ? (
-            <PdfView
-              file={this.file}
-              loading={loading}
-              className={className}
-              classnames={cx}
-              width={width}
-              height={height}
-              background={background}
-            />
-          ) : null}
-        </Suspense>
+        {!pdfjs ? (
+          this.renderTip()
+        ) : (
+          <Suspense fallback={<div>...</div>}>
+            {inited && !error ? (
+              <PdfView
+                pdfjsWorkerSrc={pdfjs}
+                file={this.file}
+                loading={loading}
+                className={className}
+                classnames={cx}
+                width={width}
+                height={height}
+                background={background}
+              />
+            ) : null}
+          </Suspense>
+        )}
+
         {this.renderError()}
       </div>
     );