forked from baidu/amis
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "Revert "feat: 支持PDF预览" (baidu#9694)"
This reverts commit eccd5c7.
- Loading branch information
yupeng12
committed
Mar 1, 2024
1 parent
a74dc8d
commit 06aa45a
Showing
15 changed files
with
484 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| --- | ||
| title: PDF Viewer | ||
| description: | ||
| type: 0 | ||
| group: ⚙ 组件 | ||
| menuName: PDFViewer 渲染 | ||
| icon: | ||
| order: 24 | ||
| --- | ||
|
|
||
| ## 基本用法 | ||
|
|
||
| ```schema: scope="body" | ||
| { | ||
| "type": "pdf-viewer", | ||
| "id": "pdf-viewer", | ||
| "src": "/examples/static/simple.pdf" | ||
| } | ||
| ``` | ||
|
|
||
| ## 配合文件上传实现预览功能 | ||
|
|
||
| 配置和 `input-file` 相同的 `name` 即可 | ||
|
|
||
| ```schema: scope="body" | ||
| { | ||
| "type": "form", | ||
| "title": "", | ||
| "wrapWithPanel": false, | ||
| "body": [ | ||
| { | ||
| "type": "input-file", | ||
| "name": "file", | ||
| "label": "File", | ||
| "asBlob": true, | ||
| "accept": ".pdf" | ||
| }, | ||
| { | ||
| "type": "pdf-viewer", | ||
| "id": "pdf-viewer", | ||
| "name": "file" | ||
| } | ||
| ] | ||
| } | ||
| ``` | ||
|
|
||
| ## 属性表 | ||
|
|
||
| | 属性名 | 类型 | 默认值 | 说明 | | ||
| | ---------- | ------ | ------ | ---------- | | ||
| | src | Api | | 文档地址 | | ||
| | width | number | 500 | 宽度 | | ||
| | height | number | - | 高度 | | ||
| | background | string | #fff | PDF 背景色 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| export default { | ||
| type: 'page', | ||
| body: { | ||
| type: 'form', | ||
| id: 'form', | ||
| debug: true, | ||
| wrapWithPanel: false, | ||
| body: [ | ||
| { | ||
| type: 'input-file', | ||
| name: 'file', | ||
| label: '选择 PDF 文件预览效果（不会上传到服务器）', | ||
| asBlob: true, | ||
| accept: '.pdf' | ||
| }, | ||
| { | ||
| type: 'pdf-viewer', | ||
| id: 'pdf-viewer', | ||
| name: 'file' | ||
| } | ||
| ] | ||
| } | ||
| }; |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| .#{$ns}PdfViewer { | ||
| position: relative; | ||
| height: 100%; | ||
| min-height: 500px; | ||
| display: flex; | ||
| justify-content: center; | ||
| padding: 50px 0; | ||
| &-Content { | ||
| width: max-content; | ||
| max-width: 100%; | ||
| &.is-loaded { | ||
| box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px; | ||
| } | ||
| } | ||
|
|
||
| &-Loading { | ||
| text-align: center; | ||
| } | ||
|
|
||
| &-Tool { | ||
| position: absolute; | ||
| z-index: 10; | ||
| padding: 5px 15px; | ||
| bottom: 60px; | ||
| background-color: #444444; | ||
| border-radius: 10px; | ||
| color: #fff; | ||
| text-align: center; | ||
| user-select: none; | ||
| .gap { | ||
| margin: 0 4px; | ||
| } | ||
| .icon { | ||
| cursor: pointer; | ||
| width: 20px; | ||
| margin: 0 10px; | ||
| &:hover { | ||
| color: var(--colors-brand-5); | ||
| } | ||
| } | ||
| .page-input { | ||
| width: 40px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| /** | ||
| * @file PdfViewer.tsx PDF 预览 | ||
| * | ||
| * @created: 2024/02/26 | ||
| */ | ||
|
|
||
| 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'; | ||
| // @ts-ignore | ||
| import pdfJSWorkerURL from 'pdfjs-dist/build/pdf.worker.min'; | ||
| pdfjs.GlobalWorkerOptions.workerSrc = pdfJSWorkerURL; | ||
|
|
||
| export interface PdfViewerProps extends ThemeProps { | ||
| file?: ArrayBuffer; | ||
| width?: number; | ||
| height?: number; | ||
| background?: string; | ||
| } | ||
|
|
||
| const PdfViewer: React.FC<PdfViewerProps> = props => { | ||
| const {classnames: cx, className, width = 500} = 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 inputRef = React.useRef<HTMLInputElement>(); | ||
|
|
||
| React.useEffect(() => { | ||
| if (props.file instanceof ArrayBuffer && props.file.byteLength > 0) { | ||
| setFile(props.file); | ||
| } else { | ||
| setFile(undefined); | ||
| } | ||
| }, [props.file]); | ||
|
|
||
| function handleLoadSuccess({numPages}: {numPages: number}) { | ||
| setLoaded(true); | ||
| setTotal(numPages); | ||
| } | ||
|
|
||
| function handleChangePage(idx: number) { | ||
| const newPage = page + idx; | ||
| if (newPage <= 0 || newPage > total) { | ||
| return; | ||
| } | ||
| setPage(newPage); | ||
| } | ||
|
|
||
| function handlePageBlur(event: React.ChangeEvent<HTMLInputElement>) { | ||
| const newPage = +event.target.value; | ||
| if (isNaN(newPage) || newPage <= 0 || newPage > total) { | ||
| if (inputRef.current) { | ||
| inputRef.current.value = page + ''; | ||
| } | ||
| return; | ||
| } | ||
| setPage(newPage); | ||
| } | ||
|
|
||
| function handleChangeScale(t: number) { | ||
| setScale(scale * t); | ||
| } | ||
|
|
||
| if (!file) { | ||
| return null; | ||
| } | ||
|
|
||
| function renderLoading() { | ||
| return ( | ||
| <div className={cx('PdfViewer-Loading')} style={{width: `${width}px`}}> | ||
| <Spinner /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function renderTool() { | ||
| return ( | ||
| <div className={cx('PdfViewer-Tool')}> | ||
| <Icon | ||
| className="icon" | ||
| icon="prev" | ||
| onClick={() => handleChangePage(-1)} | ||
| /> | ||
| <Input | ||
| className="page-input" | ||
| value={page} | ||
| onBlur={handlePageBlur} | ||
| ref={inputRef} | ||
| /> | ||
| <span className="gap">/</span> | ||
| <span>{total}</span> | ||
| <Icon | ||
| className="icon" | ||
| icon="next" | ||
| onClick={() => handleChangePage(1)} | ||
| /> | ||
| <Icon | ||
| className="icon" | ||
| icon="zoom-in" | ||
| onClick={() => handleChangeScale(1.2)} | ||
| /> | ||
| <Icon | ||
| className="icon" | ||
| icon="zoom-out" | ||
| onClick={() => handleChangeScale(0.8)} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className={cx(className, 'PdfViewer')}> | ||
| <div className={cx('PdfViewer-Content', {'is-loaded': loaded})}> | ||
| <Document | ||
| file={file} | ||
| onLoadSuccess={handleLoadSuccess} | ||
| loading={renderLoading()} | ||
| > | ||
| <Page | ||
| className={cx('PdfViewer-Content-Page')} | ||
| pageNumber={page} | ||
| width={width} | ||
| height={props.height} | ||
| loading={renderLoading()} | ||
| noData={<div>No PDF data</div>} | ||
| scale={scale} | ||
| renderTextLayer={false} | ||
| renderAnnotationLayer={false} | ||
| /> | ||
| </Document> | ||
| </div> | ||
| {loaded ? renderTool() : null} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default themeable(PdfViewer); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.