Javascript react文件查看器渲染任何非常小的文件

虽然我为react file viewer搜索了很多关于文件大小的信息，但我什么也找不到

我想使用react文件查看器单击文件名超链接并在新页面中打开文件（图像、文档或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;

从“React”导入React；
从“反应文件查看器”导入文件查看器；
从“react”导入{Fragment}；
从“/MainBody/imGurPic.ts”导入imGurPic；
常量主体=（）=>{
const file=imGurPic；
const type=“jpeg”；
返回(
);
};
导出默认主体；

imGurPic是我从imGur中随机选取的一个图像，因为它的大小很大（3024x4032像素）（不用担心它是一个cat图像…链接…我将它转换成一个base64字符串，我在FileViewer组件的filePath prop中使用它。最终，它将是一个base64字符串，作为字节数组从db中产生

在下面的沙盒中，我创建了一个演示，但发现它太小了（72*96px）。我真的不明白它为什么占用这么少的空间。此外，我输入的任何文档或Excel工作表的最大高度都是96px。我如何更改它？它似乎继承自父元素，但主体占用了页眉和页脚之间的所有可用空间

在此方面的任何帮助都将不胜感激。 这是沙箱-->

---

如果有人无法打开它，这是一个屏幕截图-->

也必须解决这个问题。如果你想让你的图像缩放到适合你的尺寸要求，只需在周围的分区中设置高度=100%。例如

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

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

.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;
}