GHHub/src/views/reservation/NameCard.jsx

import { observer } from "mobx-react";
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;

function NameCard() {
  const { reservationStore } = useStore();
	const docs = [{ uri: "https://www.chinahighlights.com/public/NameCard.doc" }];

  return (
    <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
      <DocViewer
        config={{
          header: {
            disableHeader: true,
            disableFileName: false,
            retainURLParams: false,
          },
        }} 
        documents={docs} 
        pluginRenderers={DocViewerRenderers} 
        style={{ height: 750 }} />
    </Watermark>
  );
}

export default observer(NameCard);