index.js
2.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React, { useEffect, useRef, useState } from "react";
import { Button, Modal, Image } from "antd";
import { CloseCircleOutlined } from "@ant-design/icons";
import * as commonConfig from "@/utils/config";
import jsPreviewDocx from "@js-preview/docx";
import jsPreviewExcel from "@js-preview/excel";
import jsPreviewPdf from "@js-preview/pdf";
import "@js-preview/docx/lib/index.css";
import "@js-preview/excel/lib/index.css";
import styles from "./index.less";
import { message } from "antd";
const CommonFilePreviewComponent = props => {
const {
url = "",
visible,
width = "100%",
height = "100%",
onCancel,
app
} = props;
if (!visible) return "";
if (!url) {
message.warning("文件地址为空");
onCancel && onCancel();
return "";
}
const title = url
.split("/")
.pop()
.split("_")
.pop();
const bLocalFile = url.startsWith("./");
const fileUrl = bLocalFile
? `${location.origin}/${url.split("./")[1]}`
: `${commonConfig.file_host}file/download?savePathStr=${encodeURIComponent(
url
)}&sModelsId=100&token=${app.token}`;
const fileType = title
.split(".")
.pop()
.toUpperCase();
const officeRef = useRef(null);
const [txtContent, setTxtContent] = useState("");
useEffect(
() => {
if (fileType === "XLSX") {
const myExcelPreviewer = jsPreviewExcel.init(officeRef.current);
myExcelPreviewer.preview(fileUrl);
} else if (fileType === "DOCX") {
const myDocxPreviewer = jsPreviewDocx.init(officeRef.current);
myDocxPreviewer.preview(fileUrl);
} else if (fileType === "PDF") {
const myDocxPreviewer = jsPreviewPdf.init(officeRef.current);
myDocxPreviewer.preview(fileUrl);
} else if (fileType === "TXT") {
fetch(fileUrl)
.then(response => response.text())
.then(data => setTxtContent(data));
}
},
[url]
);
return (
<Modal
open={visible}
width={width}
height={height}
style={{
top: 0,
padding: 0
}}
getContainer={() => document.querySelector("#xlyMesContent")}
mask={false}
footer={null}
onCancel={onCancel}
closeIcon={
<Button
type="link"
icon={<CloseCircleOutlined />}
className={styles.close}
onClick={onCancel}
/>
}
>
<div className={styles.filePreview}>
<div className={`${styles.title} ${bLocalFile ? styles.title1 : ""}`}>
{title}
</div>
<div className={styles.fileContent} ref={officeRef} key={url}>
{["PNG", "SVG", "JPG", "JPEG", "GIF", "BMP", "TIFF", "ICO"].includes(
fileType.toUpperCase()
) && <Image src={fileUrl} />}
{fileType === "TXT" && (
<div className={styles.txtContent}>{txtContent}</div>
)}
</div>
</div>
</Modal>
);
};
export default CommonFilePreviewComponent;