Я пытаюсь использовать 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
Форум по Javascript
1736801139
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
Подробнее здесь: [url]https://stackoverflow.com/questions/79353403/react-pdf-viewer-not-showing-the-file-in-its-original-size-and-text-is-very-smal[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия