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%' }}>&nbsp; &nbsp;<ReactFileViewer /></div>如果您根本不希望图像缩放，那就有点棘手了。我不得不求助于一些凌乱的 CSS 来覆盖硬连线的宽度和高度设置：.pg-viewer-wrapper {&nbsp; &nbsp; overflow-y: unset !important;}.photo-viewer-container {&nbsp; &nbsp; width: unset !important;&nbsp; &nbsp; height: unset !important;}.photo-viewer-container > img {&nbsp; &nbsp; width: unset !important;&nbsp; &nbsp; height: unset !important;}如果该组件具有缩放等功能（例如，适合、填充、百分比），那就太好了，但我认为该库不再被维护（查看仍在等待的旧 PR），因此建议分叉和实施比我所做的更清洁的解决方案。