在reactjs中使用文件路径启用文件预览（缩略图）

Question

我需要在从ANTD UI framework获得的每个卡片元素中使用reactjs将文件的第一页显示为缩略图，如下所示：

<Card>
    <a href={file.path}></a>
</Card>

注:

• 我将从python/flask服务器获取文件路径
• 文件格式=[“pptx”、“txt”、“docx”、“bdf”、“mud”、“pdf”、“xlsx”、“msg”、“zip”、“eml”]

任何线索/链接都将非常有用。谢谢

Answer 1

在某种程度上，[react file viewer][1]npm包完成了这项工作。使用以下语法：

import FileViewer from 'react-file-viewer';
......
<FileViewer
      fileType='xlsx'
      filePath='http://localhost:8000/static/test.xlsx'
      onError={this.onError}
/>

注意：如果文件位于其他域中，则应启用CORS策略。 [1] ：https://www.npmjs.com/package/react-file-viewer