77 lines
1.6 KiB
JavaScript
77 lines
1.6 KiB
JavaScript
|
import { Button, Space } from "antd";
|
||
|
|
import { useState } from "react";
|
||
|
|
import Pdf from "../Pdf";
|
||
|
|
|
||
|
|
const PreviewPdf = (props) => {
|
||
|
|
const {
|
||
|
|
files = [],
|
||
|
|
nameKey = "",
|
||
|
|
urlKey = "",
|
||
|
|
name = "",
|
||
|
|
url = "",
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
const [visible, setVisible] = useState(false);
|
||
|
|
const [src, setSrc] = useState("");
|
||
|
|
|
||
|
|
const previewPdf = (src) => {
|
||
|
|
setVisible(true);
|
||
|
|
setSrc(src);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onCancel = () => {
|
||
|
|
setVisible(false);
|
||
|
|
setSrc("");
|
||
|
|
};
|
||
|
|
|
||
|
|
// 单个文件预览模式
|
||
|
|
if (files.length === 0 && name && url) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Space>
|
||
|
|
<span>{name}</span>
|
||
|
|
<Button type="primary" size="small" onClick={() => previewPdf(url)}>
|
||
|
|
预览
|
||
|
|
</Button>
|
||
|
|
</Space>
|
||
|
|
<Pdf
|
||
|
|
visible={visible}
|
||
|
|
file={src}
|
||
|
|
onCancel={onCancel}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 多文件预览模式
|
||
|
|
if (files.length > 0 && !name && !url) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{files.map(item => (
|
||
|
|
<div key={item.filePath || item[urlKey]} style={{ marginTop: 5 }}>
|
||
|
|
<Space>
|
||
|
|
<span>{item.name || item.fileName || item[nameKey]}</span>
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
onClick={() => previewPdf(item.filePath || item[urlKey])}
|
||
|
|
>
|
||
|
|
预览
|
||
|
|
</Button>
|
||
|
|
</Space>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<Pdf
|
||
|
|
visible={visible}
|
||
|
|
file={src}
|
||
|
|
onCancel={onCancel}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PreviewPdf;
|