去除 react-doc-viewer，直接使用微软服务嵌入 iframe,解决闪烁问题

package.json

@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@cyntler/react-doc-viewer": "^1.13.0",
     "antd": "^5.4.2",
     "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",

src/stores/Reservation.js

@@ -58,20 +58,9 @@ class Reservation {
       .then(json => {
         if (json.errcode == 0) {
           runInAction(() => {
-            this.itineraryList = (json?.VendorTour ?? []).map((data, index) => {
-              return {
-                key: data.GRD_SN,
-                day: data.GRD_OrderDate,
-                placeTransport: data.GRD_Traffic,
-                todayActivities: data.GRD_LandscapeWL,
-                accommodation: data.GRD_Hotel,
-                meals: data.GRD_Meal_L + data.GRD_Meal_S,
-              }
-            });
             this.reservationDetail = {
               referenceNumber: json.PlanDetail[0].GRI_Name, tourGuide: json.PlanDetail[0].Guide, arrivalDate: json.PlanDetail[0].eoi_getdate
             };
-            this.customerNames = json.CusAndRequest[0].GCI_CustomerList;
             this.confirmationList = (json?.PlanChange ?? []).map((data, index) => {
               return {
                 key: data.PCI_SN,
@@ -215,13 +204,8 @@ class Reservation {
     total: 0
   }
   
-  itineraryList = [
-  ];
-  
   confirmationList = [
   ];
-
-  customerNames = '';
 }
 
 export default Reservation;

src/views/App.jsx

@@ -31,15 +31,12 @@ function App() {
 	const { authStore } = useStore();
 
 	const href = useHref();
-
-	let location = useLocation();
 	useEffect(() => {
 		// Check location
-		console.info("location.pathname: " + location.pathname);
-		console.info(location.pathname.split("/"));
-	}, [location]);
+		console.info("href: " + href);
+	}, [href]);
 
-	const splitPath = location.pathname.split("/");
+	const splitPath = href.split("/");
 	let defaultPath = "reservation";
 
 	if (splitPath.length > 1) {

src/views/reservation/Detail.jsx

@@ -2,8 +2,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, Typography, Modal, Watermark, App } from 'antd';
-import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
+import { Row, Col, Space, Button, Table, Input, Typography, Modal, App } from 'antd';
 import { useStore } from '@/stores/StoreContext.js';
 
 const { Title } = Typography;
@@ -11,29 +10,6 @@ const { TextArea } = Input;
 
 function Detail() {
 
-  const itineraryListColumns = [
-    {
-      title: 'Day',
-      dataIndex: 'day',
-    },
-    {
-      title: 'Place & Transport',
-      dataIndex: 'placeTransport',
-    },
-    {
-      title: 'Today’s Activities',
-      dataIndex: 'todayActivities',
-    },
-    {
-      title: 'Accommodation',
-      dataIndex: 'accommodation',
-    },
-    {
-      title: 'Meals',
-      dataIndex: 'meals',
-    },
-  ];
-
   const confirmationListColumns = [
     {
       title: 'PCI_Changetext',
@@ -75,9 +51,15 @@ function Detail() {
   const { reservationId } = useParams();
   const { reservationStore } = useStore();
   const [dataLoading, setDataLoading] = useState(false);
-  const { itineraryList, customerNames, reservationDetail } = reservationStore;
-  const confirmationList = reservationStore.confirmationList;
-	const docs = [{ uri: "https://www.chinahighlights.com/public/reservationW220420009.doc" }, { uri: "https://www.chinahighlights.com/public/NameCard.doc" }];
+  const { reservationDetail, confirmationList } = reservationStore;
+
+  const reservationUrl = 
+    'https://view.officeapps.live.com/op/embed.aspx?wdPrint=false&wdHideGridlines=true&wdHideComments=true&src=' + 
+    encodeURIComponent('https://www.chinahighlights.com/public/reservationW220420009.doc');
+
+  const nameCardUrl = 
+    'https://view.officeapps.live.com/op/embed.aspx?wdPrint=false&wdHideGridlines=true&wdHideComments=true&src=' + 
+    encodeURIComponent('https://www.chinahighlights.com/public/NameCard.doc');
 
   const showConfirmModal = (confirm) => { 
     setIsModalOpen(true);
@@ -140,43 +122,14 @@ function Detail() {
       <Button type="link" onClick={() => navigate('/reservation/newest')}>Back</Button>
         </Col>
       </Row>
-      {/* <Row>
-        <Col span={2}>
-      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/print`)}>Booking information</Button>
-        </Col>
-        <Col span={2}>
-      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/name-card`)}>Name Card</Button>
-        </Col>
-      </Row> */}
       <Row gutter={{ md: 24 }}>
-        <Col span={24}>
-          <Watermark content={["Global Highlights", "Discovery Your Way!"]}>
-            <DocViewer 
-              documents={docs} 
-              pluginRenderers={DocViewerRenderers} 
-              style={{ height: 600 }} />
-          </Watermark>
+        <Col span={12} style={{height: '100%'}} >
+        <iframe id="msdoc-iframe" title="msdoc-iframe" src={reservationUrl} frameborder="0" style={{ width: '100%', height: '600px' }}></iframe>
         </Col>
-      </Row>
-      {/* <Row gutter={{ md: 24 }}>
-        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
-      <Title level={5}>Itinerary Overview</Title>
-        <Table 
-        bordered
-        loading={dataLoading}
-          pagination={false}
-          dataSource={toJS(itineraryList)} columns={itineraryListColumns} 
-        />
-        </Space>
+        <Col span={12} style={{height: '100%'}} >
+        <iframe id="msdoc-iframe" title="msdoc-iframe" src={nameCardUrl} frameborder="0" style={{ width: '100%', height: '600px' }}></iframe>
         </Col>
       </Row>
-      <Row>
-        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
-          <Title level={5}>Customer Names (Full name as it appears on passport)</Title>          
-          <TextArea rows={4} value={customerNames} readOnly maxLength={6} />
-          </Space>
-        </Col>
-      </Row> */}
       <Row>
         <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
           <Title level={5}>Confirmation</Title>