预览文档插件

README.md

@@ -14,6 +14,7 @@ dayjs https://dayjs.gitee.io/docs/zh-CN/manipulate/start-of
 antd https://ant-design.antgroup.com/components/upload-cn#uploadfile
 反馈表案例 https://www.chinahighlights.com/customerservice/feedback/PostTourSurveyFormToWLGH.asp?LGC=1&COLI_SN=988185&MEI_SN=954295&Email=jennroth18@hotmail.com&ToC=0&ShowType=&page_class=4&dei_sn=28&country=30,490
 国内供应商平台 http://p.mycht.cn/index.aspx
+文档预览 https://github.com/cyntler/react-doc-viewer
 
 ## 阿里云OSS
 Bucket 名称：global-highlights-hub

package.json

@@ -9,12 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@cyntler/react-doc-viewer": "^1.13.0",
     "antd": "^5.4.2",
     "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-file-viewer": "^1.2.1",
     "react-router-dom": "^6.10.0"
   },
   "devDependencies": {

src/views/reservation/Print.jsx

@@ -1,39 +1,39 @@
 import { useParams, useNavigate } from "react-router-dom";
-import { useEffect } from 'react';
+import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import moment from "moment";
-import { Row, Col, Space, Table, Typography, List, Watermark } from 'antd';
-import FileViewer from 'react-file-viewer';
-import { useStore } from '../../stores/StoreContext.js';
+import { Row, Col, Space, Table, Typography, List, Watermark } from "antd";
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
+import { useStore } from "../../stores/StoreContext.js";
 
 const { Title } = Typography;
 
 const itineraryListColumns = [
 	{
-    title: 'Day',
-    dataIndex: 'day',
-    key: 'day',
+		title: "Day",
+		dataIndex: "day",
+		key: "day",
 	},
 	{
-    title: 'Place & Transport',
-    dataIndex: 'placeTransport',
-    key: 'placeTransport',
+		title: "Place & Transport",
+		dataIndex: "placeTransport",
+		key: "placeTransport",
 	},
 	{
-    title: 'Today’s Activities',
-    dataIndex: 'todayActivities',
-    key: 'todayActivities',
+		title: "Today’s Activities",
+		dataIndex: "todayActivities",
+		key: "todayActivities",
 	},
 	{
-    title: 'Accommodation',
-    dataIndex: 'accommodation',
-    key: 'accommodation',
+		title: "Accommodation",
+		dataIndex: "accommodation",
+		key: "accommodation",
 	},
 	{
-    title: 'Meals',
-    dataIndex: 'meals',
-    key: 'meals',
+		title: "Meals",
+		dataIndex: "meals",
+		key: "meals",
 	},
 ];
 
@@ -42,41 +42,22 @@ function Print() {
 	const { reservationId } = useParams();
 	const { reservationStore } = useStore();
 	const { itineraryList, customerList } = reservationStore;
+	const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }, { uri: "https://www.chinahighlights.com/public/SampleSpec.docx" }];
 
 	useEffect(() => {
-    console.info('Detail.useEffect: ' + reservationId);
+		console.info("Detail.useEffect: " + reservationId);
 	}, [reservationId]);
 
 	return (
-    <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
-    <Space direction="vertical" style={{ width: '100%' }}>
+		<Watermark content={["Global Highlights", "Discovery Your Way!"]}>
+			<Space direction="vertical" style={{ width: "100%" }}>
 				<Row gutter={{ md: 24 }}>
 					<Col span={24}>
 						Stream
-          <FileViewer
-            fileType={'docx'}
-            filePath={'http://202.103.68.100:890/service-fileServer/DownloadPlanDoc?GRI_SN=331740&VEI_SN=32531'}
-            errorComponent={<span>Error</span>}/>
-        </Col>
-      </Row>
-      <Row gutter={{ md: 24 }}>
-        <Col span={24}>
-        reservationW220420009.doc
-          <FileViewer
-            fileType={'docx'}
-            filePath={'https://www.chinahighlights.com/public/reservationW220420009.doc'}
-            errorComponent={<span>Error</span>}/>
-        </Col>
-      </Row>
-      <Row gutter={{ md: 24 }}>
-        <Col span={24}>
-        SampleSpec.docx
-          <FileViewer
-            fileType={'docx'}
-            filePath={'https://www.chinahighlights.com/public/SampleSpec.docx'}
-            errorComponent={<span>Error</span>}/>
+						<DocViewer documents={docs} pluginRenderers={DocViewerRenderers} style={{ height: 800 }} />
 					</Col>
 				</Row>
+
 				<Row gutter={{ md: 24 }}>
 					<Col span={24}>
 						<Title level={3}>Booking for Mr. Prasanna Venkatesa Nathan(United States) trip</Title>
@@ -99,10 +80,7 @@ function Print() {
 							dataSource={toJS(customerList)}
 							renderItem={(item, index) => (
 								<List.Item>
-                <List.Item.Meta
-                  title={<span>{item.title}</span>}
-                  description={item.description}
-                />
+									<List.Item.Meta title={<span>{item.title}</span>} description={item.description} />
 								</List.Item>
 							)}
 						/>
@@ -130,10 +108,7 @@ function Print() {
 				</Row>
 				<Row>
 					<Col span={24}>
-          <Table
-            pagination={false}
-            dataSource={toJS(itineraryList)} columns={itineraryListColumns}
-          />
+						<Table pagination={false} dataSource={toJS(itineraryList)} columns={itineraryListColumns} />
 					</Col>
 				</Row>
 				<Row gutter={{ md: 24 }}>