Как я могу показать PDF -файл предварительного просмотра на всех экранах? ⇐ CSS

[Anonymous]

Я создаю предварительный просмотр PDF, и мне нужно показать предварительный просмотр PDF во всех размерах экранов (мобильный, планшет, ПК или что -нибудь еще), но я все равно не могу этого сделать, пожалуйста, помогите мне с этим. Я думаю, было бы возможно, если я получу ширину контейнера (#pdf-preview) и вычисляю шкалу на (#preview), но это тоже не работает, знаете ли вы, почему?
У меня есть этот код, например: < /p>

Код: Выделить всё

"use client";

import { useEffect, useState, useRef } from "react";

const A4_WIDTH_MM = 210; // A4 width in mm
const A4_HEIGHT_MM = 297; // A4 height in mm

const Preview = ({ data }: { data: any }) => {
const [scale, setScale] = useState(1);
const containerRef = useRef(null); // Ref for the resume-preview container

useEffect(() => {
const calculateA4DimensionsInPixels = () => {
// Calculate the screen's DPI (dots per inch)
const dpi = window.devicePixelRatio * 96; // 96 is the standard DPI for most screens
const mmToInch = 25.4; // 1 inch = 25.4 mm

// Convert A4 dimensions from mm to pixels
const A4_WIDTH_PX = (A4_WIDTH_MM / mmToInch) * dpi;
const A4_HEIGHT_PX = (A4_HEIGHT_MM / mmToInch) * dpi;

return { A4_WIDTH_PX, A4_HEIGHT_PX };
};

const handleResize = () => {
if (!containerRef.current) return; // Ensure the ref is available

const { A4_WIDTH_PX, A4_HEIGHT_PX } = calculateA4DimensionsInPixels();

// Get the dimensions of the resume-preview container
const containerWidth = containerRef.current.offsetWidth;
const containerHeight = containerRef.current.offsetHeight;

// Calculate the scale based on the container dimensions
const scaleWidth = containerWidth / A4_WIDTH_PX;
const scaleHeight = containerHeight / A4_HEIGHT_PX;
const calculatedScale = Math.min(scaleWidth, scaleHeight);

// Update the scale state
setScale(calculatedScale);
};

// Attach the resize event listener
window.addEventListener("resize", handleResize);

// Use ResizeObserver to track changes in the container's dimensions
const resizeObserver = new ResizeObserver(handleResize);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}

// Initial calculation
handleResize();

// Cleanup
return () => {
window.removeEventListener("resize", handleResize);
resizeObserver.disconnect();
};
}, []);

return (
id="pdf-preview"
ref={containerRef} // Attach the ref to the resume-preview container
className={`max-w-[${A4_WIDTH_MM}mm] max-h-[${A4_HEIGHT_MM}mm] h-full w-full overflow-hidden bg-white`} // Make the container responsive
>




);
};

export const Body = () => {
const data = useResumeStore((state) => state.data);

if (!data) return null;

return (
className="flex h-full flex-col items-center justify-center bg-slate-200"
>


);
};

Я пытаюсь завершить компонент #preview в другой компонент #pdf-previe>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ll-screens