import React, { Fragment, useState, useEffect, useRef } from 'react';
|
import PropTypes from 'prop-types';
|
import { Button, Space } from 'antd';
|
import { Modal } from '@arco-design/web-react';
|
import { CloseCircleFilled, DownloadOutlined } from '@ant-design/icons';
|
import { IconAttachment } from '@arco-design/web-react/icon';
|
import { Document, Page, pdfjs } from 'react-pdf';
|
import * as docx from 'docx-preview';
|
import * as $$ from '@/utils/utility';
|
import PreviewImage from '@/components/PreviewImage';
|
import './index.less';
|
|
// 设置pdf.js工作器路径
|
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
|
|
const appUrl = $$.appUrl;
|
const MyPDF = ({ name, fileUrl, fileType }) => {
|
const [visible, setVisible] = useState(false);
|
const [numPages, setNumPages] = useState(null);
|
const [pageNumber, setPageNumber] = useState(1);
|
const containerRef = useRef(null);
|
|
// 成功加载PDF文件时的回调
|
function onDocumentLoadSuccess({ numPages }) {
|
setNumPages(numPages);
|
setPageNumber(1);
|
}
|
|
function changePage(offset) {
|
setPageNumber((prevPageNumber) => prevPageNumber + offset);
|
}
|
|
function previousPage() {
|
changePage(-1);
|
}
|
|
function nextPage() {
|
changePage(1);
|
}
|
|
return (
|
<>
|
{fileType === 'jpg' || fileType === 'png' ? (
|
<PreviewImage name={name} src={fileUrl} />
|
) : (
|
<div>
|
{fileUrl ? (
|
<div
|
onClick={() => {
|
setVisible(true);
|
if (fileType === 'docx' || fileType === 'doc') {
|
const renderDocx = async () => {
|
try {
|
const response = await fetch(`${appUrl.fileUrl}/${appUrl.sys}${fileUrl}`);
|
const blob = await response.blob();
|
await docx.renderAsync(blob, containerRef.current);
|
} catch (error) {
|
console.error('文档加载失败', error);
|
}
|
};
|
renderDocx();
|
}
|
}}
|
className="pdf-title"
|
>
|
<IconAttachment style={{ color: '#1A6FB8' }} />
|
<div className="pdf-name">{name}</div>
|
</div>
|
) : (
|
'-'
|
)}
|
|
<Modal
|
style={{ width: '80%' }}
|
closable={false}
|
title={name}
|
footer={
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px' }}>
|
<button
|
type="button"
|
disabled={pageNumber <= 1}
|
onClick={previousPage}
|
style={{ padding: '4px 15px', cursor: pageNumber <= 1 ? 'not-allowed' : 'pointer' }}
|
>
|
上一页
|
</button>
|
<p style={{ margin: 0 }}>
|
第 {pageNumber} 页 / 共 {numPages || '--'} 页
|
</p>
|
<button
|
type="button"
|
disabled={pageNumber >= numPages}
|
onClick={nextPage}
|
style={{ padding: '4px 15px', cursor: pageNumber >= numPages ? 'not-allowed' : 'pointer' }}
|
>
|
下一页
|
</button>
|
<Button
|
type="primary"
|
icon={<DownloadOutlined />}
|
onClick={() => {
|
window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${fileUrl.split('/').pop()}`);
|
}}
|
style={{ marginLeft: '10px' }}
|
>
|
下载
|
</Button>
|
</div>
|
}
|
centered
|
unmountOnExit={true}
|
visible={visible}
|
onCancel={() => {
|
setVisible(false);
|
}}
|
>
|
<div style={{ width: '100%', height: 'calc(100vh - 200px)', display: 'flex', justifyContent: 'center', overflow: 'auto' }}>
|
{fileType === 'pdf' && (
|
<Document
|
file={`${appUrl.fileUrl}/${appUrl.sys}${fileUrl}`}
|
onLoadSuccess={onDocumentLoadSuccess}
|
loading={<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>PDF加载中...</div>}
|
error={
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>PDF加载失败，请稍后重试</div>
|
}
|
>
|
<Page pageNumber={pageNumber} renderTextLayer={false} renderAnnotationLayer={false} scale={1.2} />
|
</Document>
|
)}
|
{fileType === 'docx' && <div ref={containerRef} className="docx-container" />}
|
{fileType === 'doc' && <div ref={containerRef} className="docx-container" />}
|
</div>
|
</Modal>
|
</div>
|
)}
|
</>
|
);
|
};
|
|
MyPDF.propTypes = {
|
title: PropTypes.any,
|
visible: PropTypes.bool,
|
onCancel: PropTypes.func,
|
onOk: PropTypes.func,
|
footer: PropTypes.any,
|
onText: PropTypes.string,
|
cancelText: PropTypes.string,
|
zIndex: PropTypes.number,
|
bodyStyle: PropTypes.object,
|
closable: PropTypes.bool,
|
centered: PropTypes.bool,
|
};
|
|
export default MyPDF;
|
