Я пытаюсь использовать React-pdf в своем приложении и загрузил с GitHub код для интеграции React-pdf в свой проект. Это работает нормально и показывает PDF-файл, но размер PDF-файла не является исходным, и он показывает PDF-файл с уменьшенным на 50% размером. Как решить проблему с размером
const PDFViewer3 = ({
pdfUrl,
fieldsToHighlights = [] // Default to empty array
}) => {
const [numPages, setNumPages] = useState(null)
const [scales, setScales] = useState([]) // Store scaling factors for each page
const [pageHeights, setPageHeights] = useState([]) // Store viewport heights for each page
// Ensure PDF.js worker is set
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`
const onDocumentLoadSuccess = pdf => {
setNumPages(pdf.numPages)
}
const handleRenderSuccess = (page, pageNumber, scale) => {
const viewport = page.getViewport({ scale: 1 })
setScales(prevScales => {
const newScales = [...prevScales]
newScales[pageNumber - 1] = scale // Save the scale for the page
return newScales
})
setPageHeights(prevHeights => {
const newHeights = [...prevHeights]
newHeights[pageNumber - 1] = viewport.height // Save the viewport height for the page
return newHeights
})
}
const renderHighlights = (pageNumber, scale) => {
const fieldsOnPage = fieldsToHighlights.filter(
field => field.page === pageNumber
)
if (!fieldsOnPage.length) return null
return fieldsOnPage.map((field, index) => (
key={index}
style={{
position: "absolute",
backgroundColor: "yellow",
opacity: 0.4,
left: `${field.x * scale}px`,
// Adjust the y-coordinate by using the dynamically calculated page height
top: `${(pageHeights[pageNumber - 1] - field.y - field.height) *
scale}px`,
width: `${field.width * scale}px`,
height: `${field.height * scale}px`
}}
/>
))
}
return (
e.preventDefault()}
>
{Array.from(new Array(numPages), (el, index) => (
{
const viewport = page.getViewport({ scale: 1 })
handleRenderSuccess(page, index + 1, viewport.scale)
}}
/>
{scales[index] &&
pageHeights[index] &&
renderHighlights(index + 1, scales[index])}
))}
)
}
export default PDFViewer3
Подробнее здесь: https://stackoverflow.com/questions/793 ... -very-smal
Средство просмотра PDF-файлов React не показывает файл в исходном размере, а текст очень мал для чтения ⇐ Javascript
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
На графике показаны прямые линии, поскольку интервал времени между линиями очень мал
Anonymous » » в форуме Python - 0 Ответы
- 30 Просмотры
-
Последнее сообщение Anonymous
-