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 像素）（别担心它是猫图片...链接here...我转换成我自己的 base64 字符串在 FileViewer 组件的 filePath 属性中使用。最终，它将是来自 db 作为字节数组的 ba​​se64 字符串。

在下面的沙箱中，我设法创建了一个演示，却发现它太小了（72*96px）。我真的不明白为什么它会占用这么少的空间。此外，我输入的任何文档或 excelsheet，最大高度为 96px。我怎样才能改变它？它似乎继承自父元素，但 Mainbody 占据了页眉和页脚之间的所有可用空间。

对此的任何帮助将不胜感激。 这里是沙箱 -->sandbox demo 如果有人打不开，这里是截图 -->

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），所以建议分叉并实施比我所做的更清洁的解决方案。