PC端、手机端在线预览文档组件react-file-viewer与npm构建内存溢出

用户上传文件后，pc端可以下载文件，但是手机端下载文件就很不方便，手机的端需要直接将附件查看，所以需要

react-file-viewer

这个npm包

可以根据自己本地开发环境npm的配置通过命令，在自己的前端目录下进行安装

npm install react-file-viewer或者cnpm install react-file-viewer

在页面中直接引用使用

import FileViewer from 'react-file-viewer';

<FileViewer
                    fileType={props.info.data.typeFile}//文件类型
                    
                    filePath={props.info.data.url} //文件地址
                    onError={onError} //函数[可选]：当文件查看器在获取或呈现请求的资源时发生错误时将调用的函数。在这里能够传递日志记录实用程序的回调。
                    errorComponent={console.log("出现错误")} //[可选]：发生错误时呈现的组件，而不是react-file-viewer随附的默认错误组件。
                    unsupportedComponent={console.log("不支持")} //[可选]：在不支持文件格式的状况下呈现的组件。
                />

filePath 要展示的文件的路径，我这里是引用的动态文件，直接请求的文件下载路径接口，

下载接口为http://1.1.1.1:8080/filedown?filename=文件名称.docx

直接就可以下载预览。

本地开发过程中，构建时报错了npm堆栈，内存溢出，是因为本地环境，分配给npm构建的空间不足导致的，需要将自己系统中的npm构建空间加大。在本地cmd命令中使用

setx NODE_OPTIONS --max_old_space_size=10240  可对本地环境进行扩容。

在服务器的docker环境中时，构建的时候，需要在构建命令使用如下命令

export NODE_OPTIONS=--max_old_space_size=8192
npm run build --max_old_space_size=8192

使npm在构建的时候扩容构建环境。