Merge pull request #10584 from allenve/feat-pdf

feat: pdfWokerJs 修改为env引入
This commit is contained in:
Allen 2024-07-05 16:21:17 +08:00 committed by GitHub
commit ab6bf74d09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 119 additions and 23 deletions

View File

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

View File

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

View File

@ -4,7 +4,7 @@ import {createRoot} from 'react-dom/client';
import axios from 'axios';
import {match} from 'path-to-regexp';
import copy from 'copy-to-clipboard';
import {normalizeLink} from 'amis-core';
import {normalizeLink, supportsMjs} from 'amis-core';
import qs from 'qs';
import {
@ -20,6 +20,7 @@ import {
import 'amis-ui/lib/locale/en-US';
import 'history';
import {attachmentAdpator} from 'amis-core';
import {pdfUrlLoad} from './loadPdfjsWorker';
import type {ToastLevel, ToastConf} from 'amis-ui/lib/components/Toast';
@ -249,6 +250,7 @@ export function embed(
richTextToken: '',
affixOffsetBottom: 0,
customStyleClassPrefix: '.amis-scope',
pdfjsWorkerSrc: supportsMjs() ? pdfUrlLoad() : '',
...env
};

View File

@ -0,0 +1,17 @@
// 这是个特殊的方法,请看考 mod.js 里面的实现。
export function pdfUrlLoad() {
// @ts-ignore
const pdfWorker = __uri('pdfjs-dist/build/pdf.worker.min.mjs');
return filterUrl(pdfWorker);
}
function __uri(url: string) {
return url;
}
// 用于发布 sdk 版本的时候替换,因为不确定 sdk 版本怎么部署,而 worker 地址路径不可知。
// 所以会被 fis3 替换成取相对的代码。
function filterUrl(url: string) {
return url;
}

View File

@ -147,7 +147,7 @@ fis.match('/node_modules/**.{js,cjs}', {
rExt: 'js'
});
fis.match('pdfjs-dist/**.mjs', {
fis.match('pdfjs-dist/**/pdf.mjs', {
isMod: true,
rExt: 'js',
parser: fis.plugin('typescript', {
@ -650,7 +650,8 @@ if (fis.project.currentMedia() === 'publish-sdk') {
// 如果 sdk 和 worker 不是部署在一个地方,请通过指定 MonacoEnvironment.getWorkerUrl
if (
file.subpath === '/node_modules/amis-ui/lib/components/Editor.js' ||
file.subpath === '/examples/loadMonacoEditor.ts'
file.subpath === '/examples/loadMonacoEditor.ts' ||
file.subpath === '/examples/loadPdfjsWorker.ts'
) {
contents = contents.replace(
/function\sfilterUrl\(url\)\s\{\s*return\s*url;/m,

View File

@ -140,6 +140,11 @@ export interface RendererEnv {
*/
enableTestid?: boolean;
/**
* pdfjs worker pdf
*/
pdfjsWorkerSrc?: string;
/**
* URL
*/

View File

@ -2336,3 +2336,12 @@ export class TestIdBuilder {
return data ? filter(this.testId, data) : this.testId;
}
}
export function supportsMjs() {
try {
new Function('import("")');
return true;
} catch (e) {
return false;
}
}

View File

@ -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

View File

@ -25,6 +25,9 @@ rm -rf sdk && ../../node_modules/.bin/fis3 release publish-sdk -c -f ../../fis-c
cp -r ../../node_modules/monaco-editor/min/vs/base/browser sdk/thirds/monaco-editor/min/vs/base
#pdfjs worker js
cp -r ../../node_modules/pdfjs-dist/build/pdf.worker.min.mjs sdk/thirds/pdfjs-dist/build/pdf.worker.min.mjs
echo "===postcss ie11==="
# 生成去掉变量的 css动画设置为零
echo ':root { --animation-duration: 0s;}' >>sdk/ie11-patch.css

View File

@ -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>
);