👑 [需求]实现ant design pro 文档预览，如pdf,world,excel，png等

[buxinren]

🥰 需求描述 | Requirements description

使用 react-file-viewer 实现ant design pro 文档预览，如pdf,world,excel，png等。
有没有哪位大佬使用上述插件实现过，我这面报错

import { Button } from 'antd';
import React from 'react';
//react文件预览支持docx，xlsx
import FileViewer from 'react-file-viewer';
//react预览pdf文件插件
import PDF from 'react-pdf-js';
import styles from './styles.less';
import xiangmu from '@/assets/DocumentSharing/项目建议书.docx';
import { PageContainer } from '@ant-design/pro-layout';

const index = () => {
//const w = require('../../assets/DocumentSharing/项目建议书.docx');
const type = 'docx';

return (

<FileViewer
fileType={type} //文件类型
//filePath="../../assets/DocumentSharing/项目建议书.docx" //文件地址（后台给返的二进制流也可以）
filePath={xiangmu}
//onError={this.onError.bind(this)} //函数[可选]：当文件查看器在获取或呈现请求的资源时发生错误时将调用的函数。在这里可以传递日志记录实用程序的回调。
errorComponent={console.log('出现错误')} //[可选]：发生错误时呈现的组件，而不是react-file-viewer随附的默认错误组件。
unsupportedComponent={console.log('不支持')} //[可选]：在不支持文件格式的情况下呈现的组件。
/>

);
};

export default index;

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [ant design pro v4登陆页面进行请求会触发页面刷新🧐[问题] #9737][ant design pro v4登陆页面进行请求会触发页面刷新🧐[问题]][65%]
• [ant design pro v5权限配置不生效问题 #9524][ant design pro v5权限配置不生效问题][65%]
• [ant design pro v5权限配置不生效问题 #9522][ant design pro v5权限配置不生效问题][65%]
• [ant design pro 多页签缓存 🧐[问题] #7448][ant design pro 多页签缓存 🧐[问题]][65%]
• [为什么安装v4版本选择ant design pro 给我装的是umi的东西？？？？？？？？？？？？ #9995][为什么安装v4版本选择ant design pro 给我装的是umi的东西？？？？？？？？？？？？][56.00000000000001%]
• [ant design pro simple 登录页面样式显示不全🐛[BUG] #9372][ant design pro simple 登录页面样式显示不全🐛[BUG]][53%]
• [Ant Design Pro Users 👨🏻‍💻👩🏻‍💻👨🏻‍💻👩🏻‍💻 #99][Ant Design Pro Users 👨🏻‍💻👩🏻‍💻👨🏻‍💻👩🏻‍💻][53%]
• [🧐[ant design pro 不支持在页面中使用antd 的菜单组件？] #9888][🧐[ant design pro 不支持在页面中使用antd 的菜单组件？]][50%]
• [🐛 [BUG]ant design pro V5为什么在ie浏览器中打不开 #9988][🐛 [BUG]ant design pro V5为什么在ie浏览器中打不开][47%]
• [🧐[问题]在ant design pro中，引入Tag、Tooltip后，页面一直无法刷新出来？ #9754][🧐[问题]在ant design pro中，引入Tag、Tooltip后，页面一直无法刷新出来？][42%]
• [请问Ant Pro v5 中，右侧的设置如何去掉🧐[问题] #9901][请问Ant Pro v5 中，右侧的设置如何去掉🧐[问题]][41%]

[chenshuai2144]

阿里云可以买到这个服务的，这不是前端能单独做到的事情

[pkaq]

kkFileView 了解一下？

[wangxing0204]

我之前也想用这个,安装失败,现在统一做的处理是将他们转为pdf 然后进行预览

[eternallycyf]

别用了吧 几年不维护了。那个word excel基本样式全乱掉。

• word 预览有个npm包挺好用的 具体可以参考我的
• 遇到过一个小问题 它在旧版本 chrome 60 需要写几号 global this 的兼容代码
  https://github.com/eternallycyf/Antd-CustomComponent/blob/main/src/components/FileViewer/FileView.tsx