From de61b2ced1cea023d19e42541bdcdaf4bfcf9451 Mon Sep 17 00:00:00 2001
From: eternallycyf <969475322@qq.com>
Date: Sat, 14 Dec 2024 10:08:04 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ims-view-pc):=20add=20FileView?=
 =?UTF-8?q?er?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FileViewer/FileView.tsx    | 217 ++++++++++++++++++
 .../src/components/FileViewer/FileViewer.tsx  |  99 ++++++++
 .../src/components/FileViewer/MarkDown.tsx    |  34 +++
 .../components/FileViewer/demo/constant.ts    |  88 +++++++
 .../src/components/FileViewer/demo/index.tsx  |  58 +++++
 .../src/components/FileViewer/demo/utils.ts   |  69 ++++++
 .../src/components/FileViewer/index.less      |  67 ++++++
 .../src/components/FileViewer/index.md        |   2 +-
 .../src/components/FileViewer/index.tsx       |   2 +
 .../src/components/FileViewer/interface.ts    |   0
 packages/ims-view-pc/src/index.ts             |   2 +
 11 files changed, 637 insertions(+), 1 deletion(-)
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/FileView.tsx
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/FileViewer.tsx
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/MarkDown.tsx
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/demo/constant.ts
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/demo/index.tsx
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/demo/utils.ts
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/index.less
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/index.tsx
 create mode 100644 packages/ims-view-pc/src/components/FileViewer/interface.ts

diff --git a/packages/ims-view-pc/src/components/FileViewer/FileView.tsx b/packages/ims-view-pc/src/components/FileViewer/FileView.tsx
new file mode 100644
index 0000000..10e598e
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/FileView.tsx
@@ -0,0 +1,217 @@
+import { Image, Skeleton } from 'antd';
+import cx from 'classnames';
+import { renderAsync } from 'docx-preview';
+import type { CSSProperties } from 'react';
+import { PureComponent } from 'react';
+import { OutTable } from 'react-excel-renderer';
+import './index.less';
+import MarkDown from './MarkDown';
+
+interface IProps {
+  styles?: CSSProperties;
+  src?: string;
+  base64?: string;
+  [onherProps: string]: any;
+}
+
+const txtFileTypes = [
+  'txt',
+  'json',
+  'js',
+  'css',
+  'java',
+  'py',
+  'html',
+  'jsx',
+  'ts',
+  'tsx',
+  'xml',
+  'md',
+  'log',
+];
+
+class FileView extends PureComponent<IProps, any> {
+  constructor(props: IProps | Readonly<IProps>) {
+    super(props);
+    this.state = {
+      pdfSrc: '',
+      loading: false,
+      text: '',
+    };
+  }
+  componentDidMount() {
+    const { src, base64 } = this.props;
+    if (src) {
+      this.showPDFBySrc(src);
+    } else if (base64) {
+      this.showPDFByBase64(base64);
+    }
+  }
+  componentwillUnmount() {
+    URL.revokeObjectURL(this.state.pdfSrc);
+  }
+  //通过src展示
+  showPDFBySrc = async (src: string) => {
+    const { fileType } = this.props;
+    if (fileType == 'pdf') {
+      try {
+        this.setState({
+          loading: true,
+        });
+        this.setState({
+          pdfSrc: src,
+          loading: false,
+        });
+      } catch (err) {}
+    }
+
+    if (fileType == 'word') {
+      // const url = `xxxxx/${src}`;
+      // const blob = await axios.get(url, {
+      //   responseType: 'blob'
+      // })
+      // renderAsync(
+      //   blob,
+      //   document.getElementById("file-preview-modal") as HTMLDivElement,
+      //   null as unknown as HTMLDivElement,
+      //   {
+      //     className: "docx", // 默认和文档样式类的类名/前缀
+      //     inWrapper: true, // 启用围绕文档内容渲染包装器
+      //     ignoreWidth: false, // 禁止页面渲染宽度
+      //     ignoreHeight: false, // 禁止页面渲染高度
+      //     ignoreFonts: false, // 禁止字体渲染
+      //     breakPages: true, // 在分页符上启用分页
+      //     ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
+      //     experimental: false, //启用实验性功能（制表符停止计算）
+      //     trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
+      //     debug: false, // 启用额外的日志记录
+      //   },
+      // );
+    }
+  };
+
+  //base64转blob
+  dataURItoBlob = (dataURI: string) => {
+    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
+    const byteString = atob(dataURI.split(',')[1]); //base64 解码
+    const arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
+    const intArray = new Uint8Array(arrayBuffer); //创建视图
+    for (let i = 0; i < byteString.length; i++) {
+      intArray[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([intArray], { type: mimeString });
+  };
+
+  // 转baffer
+  readBuffer = async (file: any): Promise<Buffer> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (loadEvent: any) => resolve(loadEvent.target.result);
+      reader.onerror = (e) => reject(e);
+      reader.readAsArrayBuffer(file);
+    });
+  };
+
+  // 转文本string
+  readText = async (buffer: Buffer): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (loadEvent: any) => resolve(loadEvent.target.result);
+      reader.onerror = (e) => reject(e);
+      reader.readAsText(new Blob([buffer]), 'utf-8');
+    });
+  };
+
+  //通过base64展示
+  showPDFByBase64 = async (content: string) => {
+    const { fileType } = this.props;
+    const blob = this.dataURItoBlob(content);
+    const fileUrl = URL.createObjectURL(blob);
+    this.setState({
+      pdfSrc: fileUrl,
+      loading: false,
+    });
+
+    if (txtFileTypes.includes(fileType)) {
+      const Buffer = await this.readBuffer(blob);
+      const text = await this.readText(Buffer);
+      this.setState({
+        text,
+      });
+    }
+
+    // 当使用旧版浏览器时 需要兼容 globalThis
+    if (fileType === 'docx') {
+      setTimeout(() => {
+        renderAsync(
+          blob,
+          document.getElementById('file-preview-modal') as HTMLDivElement,
+          null as unknown as HTMLDivElement,
+          {
+            className: 'docx', // 默认和文档样式类的类名/前缀
+            inWrapper: true, // 启用围绕文档内容渲染包装器
+            ignoreWidth: false, // 禁止页面渲染宽度
+            ignoreHeight: false, // 禁止页面渲染高度
+            ignoreFonts: false, // 禁止字体渲染
+            breakPages: true, // 在分页符上启用分页
+            ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
+            experimental: false, //启用实验性功能（制表符停止计算）
+            trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
+            debug: false, // 启用额外的日志记录
+          },
+        );
+      }, 0);
+    }
+  };
+
+  render() {
+    const { styles, className, fileType, txtFileTypes, excelData } = this.props;
+    const { loading, pdfSrc, text } = this.state;
+    const src = `${pdfSrc}`;
+
+    if (loading) {
+      return <Skeleton loading paragraph={{ rows: 10 }} active />;
+    }
+
+    if (fileType == 'docx') {
+      return <div id="file-preview-modal" />;
+    }
+
+    if (fileType == 'xlsx') {
+      return (
+        <OutTable
+          data={excelData.rows}
+          columns={excelData.cols}
+          tableClassName="ExcelTable2007"
+          tableHeaderRowClass="heading"
+        />
+      );
+    }
+
+    if (fileType == 'png' || fileType == 'jpg') {
+      return (
+        <div className="image">
+          <Image src={src} />
+        </div>
+      );
+    }
+
+    if (txtFileTypes?.includes(fileType)) {
+      const newText = `
+~~~${fileType}
+${text}
+~~~
+`;
+      return <MarkDown markdown={newText} />;
+    }
+
+    if (fileType == 'pdf') {
+      return (
+        <iframe className={cx('iframeStyle', className)} style={styles} src={src} title="pdf预览" />
+      );
+    }
+
+    return <span>不支持</span>;
+  }
+}
+export default FileView;
diff --git a/packages/ims-view-pc/src/components/FileViewer/FileViewer.tsx b/packages/ims-view-pc/src/components/FileViewer/FileViewer.tsx
new file mode 100644
index 0000000..324bd3e
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/FileViewer.tsx
@@ -0,0 +1,99 @@
+import { message, Modal } from 'antd';
+import React, { PureComponent } from 'react';
+import { ExcelRenderer } from 'react-excel-renderer';
+import FileView from './FileView';
+const txtFileTypes = [
+  'txt',
+  'json',
+  'js',
+  'css',
+  'java',
+  'py',
+  'html',
+  'jsx',
+  'ts',
+  'tsx',
+  'xml',
+  'md',
+  'log',
+];
+
+const fileAllTypes = ['docx', 'xlsx', 'png', 'jpg', 'pdf', ...txtFileTypes];
+class FilePreView extends PureComponent<any, any> {
+  protected pdfViewRef: React.RefObject<any> = React.createRef();
+  protected previewWrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      modalVisible: false,
+      fileType: '',
+      excelData: {
+        cols: [],
+        rows: [],
+      },
+    };
+  }
+  //显隐状态的改变
+  controlIsShow = (params: { src?: string; base64?: string; originFileObj?: any }) => {
+    const { modalVisible } = this.state;
+    const { src, base64, originFileObj } = params;
+    const { name } = originFileObj;
+    const fileType = name.slice(name.lastIndexOf('.') + 1).toLowerCase();
+
+    if (!fileAllTypes.includes(fileType)) {
+      return message.error('该文件不支持预览');
+    }
+    if (fileType == 'xlsx') {
+      ExcelRenderer(originFileObj, (err: Error, resp: any) => {
+        this.setState({
+          excelData: {
+            cols: resp.cols,
+            rows: resp.rows,
+          },
+        });
+      });
+    }
+    this.setState({
+      modalVisible: !modalVisible,
+      src,
+      base64,
+      fileType,
+    });
+  };
+
+  render() {
+    const { modalVisible, src, base64, fileType, excelData } = this.state;
+    return (
+      <Modal
+        open={modalVisible}
+        title={fileType + ' 预览'}
+        onCancel={() => {
+          this.setState({
+            modalVisible: false,
+          });
+        }}
+        width={1200}
+        styles={{
+          body: {
+            overflow: 'scroll',
+            height: '70vh',
+          },
+        }}
+        footer={null}
+        destroyOnClose={true}
+      >
+        <FileView
+          id="file-preview-modal"
+          ref={this.pdfViewRef}
+          src={src}
+          base64={base64}
+          fileType={fileType}
+          excelData={excelData}
+          txtFileTypes={txtFileTypes}
+          styles={{ height: '600px' }}
+        />
+      </Modal>
+    );
+  }
+}
+export default FilePreView;
diff --git a/packages/ims-view-pc/src/components/FileViewer/MarkDown.tsx b/packages/ims-view-pc/src/components/FileViewer/MarkDown.tsx
new file mode 100644
index 0000000..ead7aa1
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/MarkDown.tsx
@@ -0,0 +1,34 @@
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+
+export default (props: any) => {
+  return (
+    <ReactMarkdown
+      // eslint-disable-next-line react/no-children-prop
+      children={props.markdown}
+      remarkPlugins={[remarkGfm]}
+      components={{
+        code({ className, children }) {
+          const match = /language-(\w+)/.exec(className || '');
+          return match ? (
+            <SyntaxHighlighter
+              // eslint-disable-next-line react/no-children-prop
+              children={String(children).replace(/\n$/, '')}
+              style={dracula}
+              language={match[1]}
+              showLineNumbers
+              PreTag="div"
+              {...props}
+            />
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    />
+  );
+};
diff --git a/packages/ims-view-pc/src/components/FileViewer/demo/constant.ts b/packages/ims-view-pc/src/components/FileViewer/demo/constant.ts
new file mode 100644
index 0000000..88e75da
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/demo/constant.ts
@@ -0,0 +1,88 @@
+export const dataSource = [
+  {
+    key: '1',
+    type: 'docx',
+  },
+  {
+    key: '2',
+    type: 'xlsx',
+  },
+  {
+    key: '3',
+    type: 'png',
+  },
+  {
+    key: '4',
+    type: 'jpg',
+  },
+  {
+    key: '5',
+    type: 'pdf',
+  },
+  {
+    key: '6',
+    type: 'txt',
+  },
+  {
+    key: '7',
+    type: 'json',
+  },
+  {
+    key: '8',
+    type: 'js',
+  },
+  {
+    key: '9',
+    type: 'css',
+  },
+  {
+    key: '10',
+    type: 'java',
+  },
+  {
+    key: '11',
+    type: 'py',
+  },
+  {
+    key: '12',
+    type: 'html',
+  },
+  {
+    key: '13',
+    type: 'jsx',
+  },
+  {
+    key: '14',
+    type: 'ts',
+  },
+  {
+    key: '15',
+    type: 'tsx',
+  },
+  {
+    key: '16',
+    type: 'xml',
+  },
+  {
+    key: '17',
+    type: 'md',
+  },
+  {
+    key: '18',
+    type: 'log',
+  },
+];
+
+export const columns = [
+  {
+    title: '类型',
+    dataIndex: '类型',
+    key: 'key',
+    render: () => '支持类型',
+  },
+  {
+    title: '描述',
+    dataIndex: 'type',
+    key: 'type',
+  },
+];
diff --git a/packages/ims-view-pc/src/components/FileViewer/demo/index.tsx b/packages/ims-view-pc/src/components/FileViewer/demo/index.tsx
new file mode 100644
index 0000000..dab844e
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/demo/index.tsx
@@ -0,0 +1,58 @@
+import { Button, Form, Table, Upload } from 'antd';
+import { FileViewer } from 'ims-view-pc';
+import { useRef } from 'react';
+import { columns, dataSource } from './constant';
+
+const normFile = (e: any) => {
+  if (Array.isArray(e)) return e;
+  return e?.fileList;
+};
+
+const getBase64 = (file: Blob, cb: (result: string | ArrayBuffer | null) => void) => {
+  const reader = new FileReader();
+  reader.addEventListener('load', () => cb(reader.result));
+  reader.readAsDataURL(file);
+};
+
+const PdfPage = () => {
+  const pdfRef = useRef<any>(null!);
+  const [form] = Form.useForm();
+
+  const handlePreviewPdf = ({ originFileObj }: any) => {
+    // 1.base64方式预览
+    getBase64(originFileObj, (fileURL: string | ArrayBuffer | null) => {
+      pdfRef.current.controlIsShow({
+        base64: fileURL,
+        originFileObj,
+      });
+    });
+    // 2.src方式预览 通过后端接口获取src路径
+    // pdfRef.current.controlIsShow({
+    //   src: "http://marsgis.cn/doc/study-gis.pdf",
+    // });
+  };
+
+  return (
+    <>
+      <Form form={form}>
+        <h2>点击文件名即可预览</h2>
+        <Form.Item valuePropName="fileList" getValueFromEvent={normFile}>
+          <Upload
+            onPreview={(file) => handlePreviewPdf(file)}
+            beforeUpload={() => {
+              return false;
+            }}
+            name="file"
+            maxCount={10}
+          >
+            <Button>上传word excel pdf 图片等格式</Button>
+          </Upload>
+        </Form.Item>
+      </Form>
+      <FileViewer ref={pdfRef} />
+      <Table pagination={false} dataSource={dataSource} columns={columns} />
+    </>
+  );
+};
+
+export default PdfPage;
diff --git a/packages/ims-view-pc/src/components/FileViewer/demo/utils.ts b/packages/ims-view-pc/src/components/FileViewer/demo/utils.ts
new file mode 100644
index 0000000..f40e62a
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/demo/utils.ts
@@ -0,0 +1,69 @@
+import { message } from 'antd';
+import axios from 'axios';
+
+export function exportFile(url: string, params: any) {
+  return axios.get(url, {
+    params,
+    responseType: 'blob',
+  });
+}
+
+/**
+ * 下载文件
+ * @param searchParams
+ * @param options
+ * @param callback
+ */
+export const handleDownload = (
+  searchParams: any,
+  options = { url: '', fileName: '' },
+  callback?: () => void,
+) => {
+  exportFile(options.url, searchParams).then((response: any) => {
+    response.blob().then((blob: Blob) => {
+      if (response.status === 200) {
+        if (window.navigator && (window as any).navigator.msSaveOrOpenBlob) {
+          (window as any).navigator.msSaveOrOpenBlob(blob, options.fileName);
+        } else {
+          const blobUrl = window.URL.createObjectURL(blob);
+          const aElement = document.createElement('a');
+          const fileName = options.fileName;
+          aElement.href = blobUrl;
+          aElement.download = fileName;
+          aElement.click();
+          window.URL.revokeObjectURL(blobUrl);
+        }
+      } else if (callback) callback();
+    });
+  });
+};
+
+export const postDownloadFile = (url: string, fileName: string, data: any = {}) => {
+  function download(url: string, data: any) {
+    return axios(url, {
+      method: 'get',
+      responseType: 'blob',
+      params: { url },
+      data,
+    });
+  }
+  return download(url, data).then((data: any) => {
+    if (!data || data?.size == 0) {
+      message.error('文件不存在');
+      return;
+    }
+    if (window.navigator && typeof (window as any).navigator.msSaveBlob !== undefined) {
+      (window.navigator as any).msSaveBlob(new Blob([data]), fileName);
+    } else {
+      const url = window.URL.createObjectURL(new Blob([data]));
+      let link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = url;
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    }
+  });
+};
diff --git a/packages/ims-view-pc/src/components/FileViewer/index.less b/packages/ims-view-pc/src/components/FileViewer/index.less
new file mode 100644
index 0000000..5d6acd2
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/index.less
@@ -0,0 +1,67 @@
+.iframeStyle {
+  width: 100%;
+  height: 99%;
+  border: none;
+}
+
+.ExcelTable2007 {
+  padding: 10px;
+  width: 100%;
+  border: 1px solid #b0cbef;
+  border-spacing: 0px;
+  border-collapse: collapse;
+  border-width: 1px 0px 0px 1px;
+  font-weight: 100;
+  font-size: 11pt;
+  font-family: Calibri;
+}
+
+.ExcelTable2007 TH {
+  height: 17px;
+  border: 1px solid #9eb6ce;
+  border-width: 0px 1px 1px 0px;
+  background-repeat: repeat-x;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 17px;
+}
+
+.ExcelTable2007 TD {
+  padding: 0px 4px 0px 2px;
+  border: 0px;
+  border: 1px solid #d0d7e5;
+  border-width: 0px 1px 1px 0px;
+  background-color: white;
+}
+
+.ExcelTable2007 TD B {
+  border: 0px;
+  background-color: white;
+  font-weight: bold;
+}
+
+.ExcelTable2007 TD.heading {
+  border: 1px solid #9eb6ce;
+  border-width: 0px 1px 1px 0px;
+  background-color: #e4ecf7;
+  text-align: center;
+  font-weight: bold;
+}
+
+.ExcelTable2007 TH.heading {
+  background-repeat: none;
+}
+
+TH {
+  text-align: center;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/packages/ims-view-pc/src/components/FileViewer/index.md b/packages/ims-view-pc/src/components/FileViewer/index.md
index 4cb9a68..407a529 100644
--- a/packages/ims-view-pc/src/components/FileViewer/index.md
+++ b/packages/ims-view-pc/src/components/FileViewer/index.md
@@ -10,4 +10,4 @@ demo:
 
 ## FileViewer 文件预览
 
-[FileViewer](https://github.com/eternallycyf/Antd-CustomComponent/blob/main/src/pages/FileViewer/index.tsx)
+<code src='./demo/index.tsx'>1.FileUpload</code>
diff --git a/packages/ims-view-pc/src/components/FileViewer/index.tsx b/packages/ims-view-pc/src/components/FileViewer/index.tsx
new file mode 100644
index 0000000..1781085
--- /dev/null
+++ b/packages/ims-view-pc/src/components/FileViewer/index.tsx
@@ -0,0 +1,2 @@
+import FileViewer from './FileViewer';
+export default FileViewer;
diff --git a/packages/ims-view-pc/src/components/FileViewer/interface.ts b/packages/ims-view-pc/src/components/FileViewer/interface.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/ims-view-pc/src/index.ts b/packages/ims-view-pc/src/index.ts
index 2eb8a39..3473ec2 100644
--- a/packages/ims-view-pc/src/index.ts
+++ b/packages/ims-view-pc/src/index.ts
@@ -72,3 +72,5 @@ export * from './type/index';
 
 export { default as FileUpload } from './components/FileUpload';
 export * from './components/FileUpload/interface';
+
+export { default as FileViewer } from './components/FileViewer';