Изменение размера PDF с помощью React-pdf-viewer ⇐ CSS

[Anonymous]

Я хочу иметь возможность изменять размер PDF-документа, который я загружаю в браузер с помощью React-pdf-Viewer. PDF-файл всегда должен помещаться внутри окна браузера и изменять его размер, если окно браузера уменьшается. Как это можно сделать?
Если нет, то как я могу сделать его похожим на программу чтения PDF-файлов Chrome, где вы можете легко увеличивать и уменьшать масштаб с помощью трекпада. В React-pdf-Viewer, если я начну с очень маленького окна браузера, а затем увеличу размер окна и увеличу масштаб, оно начнет размываться.
Ниже мой код.`
import React, { useEffect, useState, useRef } from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';
import { highlightPlugin } from '@react-pdf-viewer/highlight';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/highlight/lib/styles/index.css';

const PdfHighlighter = () => {
const [highlights, setHighlights] = useState([]);
const [pageDimensions, setPageDimensions] = useState({ height: 0, width: 0 });
const highlightPluginInstance = highlightPlugin();
const viewerRef = useRef(null);

// Fetching the highlighting bounding box data from Flask app
useEffect(() => {
fetch('http://127.0.0.1:5000/extract-pdf')
.then(response => response.json())
.then(data => {
const highlightAreas = data.flatMap(item => {
const pageIndex = item.page - 1; // Adjusted to parse page number correctly
return item.bounding_boxes.map(boundingBox => ({
pageIndex: pageIndex,
boundingBox: boundingBox,
}));
});
setHighlights(highlightAreas);
console.log(highlightAreas);
})
.catch(error => console.error("Error fetching data:", error));
}, []);

const handlePageLoad = (e) => {
const { pageHeight, pageWidth } = e;
setPageDimensions({ height: pageHeight, width: pageWidth });
};

const handleResize = () => {
if (viewerRef.current) {
viewerRef.current.style.height = `${window.innerHeight}px`;
viewerRef.current.style.width = `${window.innerWidth}px`;
}
};

useEffect(() => {
window.addEventListener('resize', handleResize);
handleResize(); // Set initial size

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return (


(

{highlights.map((highlight, index) => {
const { height, width } = pageDimensions;
if (height === 0 || width === 0) {
return null;
}

// Adjusted coordinate transformation for y-axis inversion
const top = (highlight.boundingBox[1] / height) * 100;
const left = (highlight.boundingBox[0] / width) * 100;
const boxHeight = ((highlight.boundingBox[3] - highlight.boundingBox[1]) / height) *
100;
const boxWidth = ((highlight.boundingBox[2] - highlight.boundingBox[0]) / width) *
100;

return (

);
})}

)}
/>


);
};

export default PdfHighlighter;
`


Подробнее здесь: https://stackoverflow.com/questions/785 ... pdf-viewer