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

最新推荐文章于 2024-09-13 21:47:04 发布

runrun117

最新推荐文章于 2024-09-13 21:47:04 发布

阅读量1k

点赞数

分类专栏：前端文章标签： react.js node.js javascript

本文链接：https://blog.csdn.net/runrun117/article/details/120783444

版权

前端专栏收录该内容

66 篇文章 0 订阅

订阅专栏

这篇博客讲述了在React项目中使用react-file-viewer库实现移动端文件预览的功能，解决了手机端无法直接下载的问题。同时，针对本地开发时npm构建出现的内存溢出问题，提供了调整NODE_OPTIONS环境变量来增大构建空间的解决方案。在服务器的Docker环境中构建时，也给出了相应的环境变量设置方法。

摘要由CSDN通过智能技术生成

用户上传文件后，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在构建的时候扩容构建环境。