预览

config/plugin.config.js

@@ -8,12 +8,12 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const prodGzipList = ['js', 'css'];
 
 export default config => {
-  // config.module
-  //   .rule()
-  //   .test(/\.(pdf|svg|docx|doc)$/)
-  //   .use('file-loader?name=[path][name].[ext]')
-  //   .loader('file-loader')
-  //   .end();
+  config.module
+    .rule()
+    .test(/\.(pdf|svg|docx|doc)$/)
+    .use('file-loader?name=[path][name].[ext]')
+    .loader('file-loader')
+    .end();
   // pro 和 开发环境再添加这个插件
   if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
     // 将所有 less 合并为一个供 themePlugin使用

package.json

@@ -75,6 +75,7 @@
     "nzh": "^1.0.4",
     "omit.js": "^1.0.0",
     "path-to-regexp": "^3.0.0",
+    "pdfjs-dist": "^3.3.122",
     "prop-types": "^15.6.2",
     "qrcode.react": "^3.1.0",
     "qs": "^6.6.0",
@@ -94,7 +95,7 @@
     "react-id-swiper": "^2.4.0",
     "react-keyed-file-browser": "^1.5.2",
     "react-media": "^1.9.2",
-    "react-pdf": "^5.1.0",
+    "react-pdf": "^6.2.2",
     "react-resizable": "^3.0.4",
     "react-router-dom": "^4.3.1",
     "react-sizeme": "^2.6.7",

src/components/FileViewer/index.js

@@ -2,7 +2,7 @@ import FileViewer from 'react-file-viewer';
 import { Modal, Spin } from 'antd';
 import { memo } from 'react';
 
-const FileViewerModal = ({ data, visible, onCancel }) => {
+const FileViewerModal = ({ data, visible, onCancel, downloadFile }) => {
   const type = data?.url?.split('.')[data?.url?.split('.').length - 1];
   console.log(data?.url, type);
   return (
@@ -18,9 +18,9 @@ const FileViewerModal = ({ data, visible, onCancel }) => {
         key={data?.name}
         fileType={type}
         filePath={data?.url}
-        onError={() => console.log('Failed to load')}
+        onError={() => downloadFile(data)}
         errorComponent={console.log('出现错误')}
-        unsupportedComponent={console.log('不支持')}
+        unsupportedComponent={<div>不支持的文件格式</div>}
       />
     </Modal>
   );

src/pages/Detail/FlowModal.js

@@ -88,7 +88,6 @@ function FlowModal(props) {
       edges: flowDetail.edges,
     };
   }, [flowDetail, version.template_node_id]);
-  console.log('version========', version);
 
   useEffect(() => {
     if (!visible) updateSteps([]);

src/pages/Detail/FormAndFilesNode.js

@@ -42,14 +42,7 @@ const renderFrom = data => {
   }
 };
 
-const FormAndFilesNode = ({
-  title,
-  formData,
-  excelFileData,
-  loading,
-  // setExportData,
-  // setExcelFileVisible,
-}) => {
+const FormAndFilesNode = ({ title, formData, excelFileData, loading, downloadFile }) => {
   const [exportData, setExportData] = useState({});
   const [excelFileVisible, setExcelFileVisible] = useState(false);
   const columns = [
@@ -91,6 +84,7 @@ const FormAndFilesNode = ({
       <FileViewerModal
         data={exportData}
         visible={excelFileVisible}
+        downloadFile={downloadFile}
         onCancel={() => {
           setExcelFileVisible(false);
         }}

src/pages/Detail/Index.js

@@ -1191,6 +1191,7 @@ function Detail(props) {
         formData={version?.ding_schema}
         excelFileData={excelFileData}
         loading={loading.effects['detail/QueryExcelFiles']}
+        downloadFile={downloadFile}
       />
 
       <RightDrawer