Средство просмотра PDF-файлов React не показывает файл в исходном размере, а текст очень мал для чтенияJavascript

Форум по Javascript
Ответить Пред. темаСлед. тема
Anonymous
 Средство просмотра PDF-файлов React не показывает файл в исходном размере, а текст очень мал для чтения

Сообщение Anonymous »

Я пытаюсь использовать 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
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Javascript»