Столько, сколько я искал по поводу размера файла для программы-просмотрщика файлов реакции, я ничего не смог найти.
Я хочу использовать программу-просмотрщик файлов реакции, чтобы щелкнуть гиперссылку с именем файла и открыть файл. (изображение, документ или лист 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;
imGurPi c - это изображение, которое я случайно выбрал из imGur из-за его большой размер (3024x4032 пикселей) (не волнуйтесь, это изображение кошки ... ссылка здесь ... Я преобразовал в строку base64, которую я использую в подпорке filePath компонента FileViewer. это будет строка base64, поступающая из БД в виде байтового массива.
В следующей песочнице мне удалось создать демо, только чтобы выяснить, что она СЛИШКОМ мала (72 * 96px). Я не совсем понимаю, почему это заняло бы так мало места. Кроме того, для любого введенного мной документа или таблицы исключений максимальная высота составляет 96 пикселей. Как я могу изменить его? Кажется, он наследуется от родительского элемента, но Mainbody занимает все доступное пространство между заголовком. и нижний колонтитул.
Любая помощь по этому вопросу будет оценена. Вот песочница -> демо песочница И если кто-то не может открыть его, вот скриншот ->