mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
Merge pull request #10584 from allenve/feat-pdf
feat: pdfWokerJs 修改为env引入
This commit is contained in:
commit
ab6bf74d09
@ -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
|
||||
}
|
||||
);
|
||||
```
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
|
17
examples/loadPdfjsWorker.ts
Normal file
17
examples/loadPdfjsWorker.ts
Normal 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;
|
||||
}
|
@ -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,
|
||||
|
@ -140,6 +140,11 @@ export interface RendererEnv {
|
||||
*/
|
||||
enableTestid?: boolean;
|
||||
|
||||
/**
|
||||
* pdfjs worker 地址,用于渲染 pdf
|
||||
*/
|
||||
pdfjsWorkerSrc?: string;
|
||||
|
||||
/**
|
||||
* 替换文本,用于实现 URL 替换、语言替换等
|
||||
*/
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user