react-file-viewer 使任何文件都非常小

Question

尽管我搜索了 react-file-viewer 的文件大小，但我找不到任何东西。我想使用 react-file-viewer 单击文件名超链接并在新页面中打开文件（图像、文档或 excel 表）。渲染工作正常，除了图像/文档大小。我有以下示例：import React from "react";import FileViewer from "react-file-viewer";import { Fragment } from "react";import imGurPic from "./MainBody/imGurPic.ts";const MainBody = () => {  const file =imGurPic;       const type = "jpeg";   return (    <Fragment>       <FileViewer fileType={type} filePath={file} />     </Fragment>   );};export default MainBody;imGurPic 是我从 imGur 中随机选择的图像，因为它的尺寸很大（3024x4032 像素）（别担心它是猫图像...链接在这里...我转换为我在 filePath 道具中使用的 base64 字符串FileViewer 组件。最终，它将是来自 db 作为字节数组的 base64 字符串。在下面的沙箱中，我设法创建了一个演示，却发现它太小了（72*96px）。我真的不明白为什么它会占用这么少的空间。此外，我输入的任何文档或 excelsheet，最大高度为 96px。我怎样才能改变它？它似乎继承自父元素，但 Mainbody 占据了页眉和页脚之间的所有可用空间。对此的任何帮助将不胜感激。这里是沙盒 -->沙盒演示 万一有人打不开，这里是截图 -->

Answer 1

也必须弄清楚这一点。如果您希望图像缩放以适合您的尺寸要求，只需在周围的 div 中设置 height=100%。例如

<div style={{ height: '100%' }}>

   <ReactFileViewer />

</div>

如果您根本不希望图像缩放，那就有点棘手了。我不得不求助于一些凌乱的 CSS 来覆盖硬连线的宽度和高度设置：

.pg-viewer-wrapper {

    overflow-y: unset !important;

}

.photo-viewer-container {

    width: unset !important;

    height: unset !important;

}

.photo-viewer-container > img {

    width: unset !important;

    height: unset !important;

}

如果该组件具有缩放等功能（例如，适合、填充、百分比），那就太好了，但我认为该库不再被维护（查看仍在等待的旧 PR），因此建议分叉和实施比我所做的更清洁的解决方案。