猛跑小豬
2022-07-15 09:56:03
盡管我搜索了 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 像素)(別擔心它是貓圖像...鏈接在這里...我轉(zhuǎn)換為我在 filePath 道具中使用的 base64 字符串FileViewer 組件。最終,它將是來自 db 作為字節(jié)數(shù)組的 base64 字符串。在下面的沙箱中,我設(shè)法創(chuàng)建了一個演示,卻發(fā)現(xiàn)它太小了(72*96px)。我真的不明白為什么它會占用這么少的空間。此外,我輸入的任何文檔或 excelsheet,最大高度為 96px。我怎樣才能改變它?它似乎繼承自父元素,但 Mainbody 占據(jù)了頁眉和頁腳之間的所有可用空間。對此的任何幫助將不勝感激。這里是沙盒 -->沙盒演示 萬一有人打不開,這里是截圖 -->
1 回答

倚天杖
TA貢獻1828條經(jīng)驗 獲得超3個贊
也必須弄清楚這一點。如果您希望圖像縮放以適合您的尺寸要求,只需在周圍的 div 中設(shè)置 height=100%。例如
<div style={{ height: '100%' }}>
<ReactFileViewer />
</div>
如果您根本不希望圖像縮放,那就有點棘手了。我不得不求助于一些凌亂的 CSS 來覆蓋硬連線的寬度和高度設(shè)置:
.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),因此建議分叉和實施比我所做的更清潔的解決方案。
添加回答
舉報
0/150
提交
取消