index.js
2.2 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
/* eslint-disable */
import { Modal } from "antd-v4";
import React, { useEffect, useRef } from "react";
import commonConfig from "@/utils/config";
import PrintPdf from "@/components/PrintPdf/PrintPdf";
import jsPreviewDocx from "@js-preview/docx";
import jsPreviewExcel from "@js-preview/excel";
import "@js-preview/docx/lib/index.css";
import "@js-preview/excel/lib/index.css";
const OfficePreview = props => {
const { officePreviewVisible, officeFileUrl, onCancel, app } = props;
const title = officeFileUrl
.split("/")
.pop()
.split("_")
.pop();
const fileUrl = `${commonConfig.file_host}file/downloadView?savePathStr=${encodeURIComponent(officeFileUrl)}&sModelsId=100&token=${app.token}`;
const fileType = title
.split(".")
.pop()
.toUpperCase();
const officeRef = useRef(null);
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);
}
}, []);
return (
<Modal title={title} visible={officePreviewVisible} width="100%" height="100%" style={{ top: 0 }} footer={null} onCancel={onCancel}>
<div
style={{
width: '100%',
height: 'calc(100vh - 67px)',
overflow: 'auto',
}}
>
<div style={{ width: '100%', height: '100%' }} ref={officeRef}>
{fileType === 'PDF' && (
<div className="pdfContainer" style={{ width: '100%', height: '100%' }}>
<iframe src={fileUrl} style={{ width: '100%', height: '100%' }} frameborder="0"></iframe>
</div>
)}
{['MP4', 'WEBM', 'OGG'].includes(fileType) && (
<div style={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
overflow: "hidden"
}}>
<video src={fileUrl} controls style={{ height: '100%' }} />
</div>
)}
</div>
</div>
</Modal>
);
};
export default OfficePreview;