449 questions
1
vote
0
answers
36
views
PDF rendering issues with multilingual text across different languages in a PDF generation library like pdf-lib
I am generating PDFs in my project using libraries such as @react-pdf/renderer and pdf-lib, and I am encountering significant challenges with font compatibility for multilingual text. In my use case, ...
- 1,835
0
votes
0
answers
12
views
React pdf word-break [closed]
Is there any way to use like word-break on react pdf? i've been trying to find a way to do that but still could not figure it out.
Like i need to wrap it per word. Currently, it still wrap it using ...
- 1
1
vote
2
answers
44
views
Why is ReactPDF.renderToBuffer not a function in @react-pdf/renderer?
I’m trying to generate a PDF using @react-pdf/renderer, and I want to directly render the PDF to a Buffer for further processing (e.g., saving it to a file or sending it as an HTTP response). However, ...
- 1,175
0
votes
0
answers
25
views
How to Prevent Component Splitting Across Pages in A4 Layout Using React and react-to-print?
I am building a React application where I need to render content on A4-sized pages for printing. I’m using the react-to-print library to handle the printing functionality.
The issue I’m facing is that ...
2
votes
1
answer
52
views
Re-rendering issue with PDFs in React
const [numPagesState, setNumPagesState] = useState(0);
const allCertificates = formik?.values?.certificate_file || [];
{allCertificates?.length > 0 &&
allCertificates?.map((el) => {
...
1
vote
0
answers
48
views
React-PDF Causes iPhone 13 and Below to Crash on PDF Display in Next.js App
I’m working on a Next.js project that involves displaying PDFs using the react-pdf library. The issue arises on iPhone 13 and older models, where the app crashes after displaying a PDF. The PDF ...
- 1,936
0
votes
1
answer
65
views
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
at Object.inherits2 [as inherits] (@react-pdf_renderer.js?v=2aabb8bf:122:50)
at ../../node_modules/blob-stream/...
0
votes
0
answers
49
views
@react-pdf/renderer how to build for node when using renderToStream
I am trying to build (bundle) an app that uses @react-pdf/renderer with vite. Then that bundle will be used in different node express app (like a library).
I export some functions that can be used in ...
- 3,175
0
votes
1
answer
75
views
@react-pdf/renderer can't use fonts when building for node
I am trying to build an app that uses react-pdf/renderer. I will send a pdf response from node js express server. The fonts I use in react-pdf/renderer (.ttf) seems like are fetched via XMLHttpRequest ...
- 3,175
0
votes
2
answers
41
views
Metadata in PDFs from HTML
I need to carry some metadata – which could amount to just an ID – from the source HTML, through to the PDF using WeasyPrint, eventually ending up somehow addressable in the HTML rendered by pdf.js (...
- 12.6k
0
votes
1
answer
114
views
How to pass props to react-pdf/renderer renderToStream function?
I am trying to render a pdf to sent it as an attachment with Resend.
This is my test PDF. Basically the one from the docs from react-pdf/renderer but with one testprop added.
import { Document, Page, ...
- 498
0
votes
0
answers
46
views
react-pdf/renderer small gap between views
Small gap appears between Views
<PDFViewer style={{ width: '100%', height: '100%' }}>
<Document>
<Page size="A4">
<View style={{padding: 20}}>
{/...
- 3,175
0
votes
0
answers
18
views
How can I handle a view containing multipage text in React PDF?
I have a vertical box view that has text that needs to span multiple pages. However, the View component appears to size itself correctly, but the Text component inside overflows out of the box into ...
- 10.1k
0
votes
0
answers
119
views
PDF Flickering on render react-pdf
I have a react app with vite using react-pdf. I want to accomplish the same smoothness that for example Chrome's built in pdf renderer has when zooming in from the mousepad. However, when I try to ...
- 15
0
votes
0
answers
73
views
highlighting text not working in react-pdf-viewer
I have two div's.
To display the pdf content. Example: "Dummy PDF File".
To show the words from the pdf. Example: "Dummy PDF File".
My requirement is when I mouse over a word in ...
- 177
2
votes
3
answers
530
views
Why do I get this error when I try to use react-pdf in my next js 14.2
I've been having a problem with react-pdf in my next js, i've been following multiple tutorial and it seems like still have an error.
I get this error
⨯ Instead change the require of react-pdf.js in ...
- 671
0
votes
0
answers
55
views
How to count all highlight words number by use react-pdf?
I use react-pdf to render pdf files, and one function is to count all the hightlight words number,code is like this:
import React, { useCallback, useState } from 'react';
import { Document, Page } ...
- 19
0
votes
0
answers
27
views
how to recover the history scroll position when using VariableSizeList
I am using a React window "react-window": "^1.8.10" to render some PDF pages, this is what the code looks like:
const renderPdfList = () => {
if (pdf && pageViewports) ...
- 37.9k
0
votes
0
answers
41
views
403 Forbidden error, while rendering Pdf using react-pdf and Uploadthings to store pdf
enter image description here
this is the core.ts
import { db } from "@/db";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import { createUploadthing, ...
0
votes
0
answers
55
views
how to avoid the fisrt http request load the whole pdf when using range request with pdf.js
I am trying to use the pdf.js range request to load a huge pdf, but now I found the range request works but the first request load the whole pdf. From the official document is told that the range ...
- 37.9k
0
votes
0
answers
148
views
fix the pdf flash with many pages when using react-pdf
I am using react-pdf version 9.0.1 to show latex compiled pdf in react(version 18) project, and working with the flash issue when scale pdf followed by this issue https://github.com/wojtekmaj/react-...
- 37.9k
0
votes
0
answers
60
views
How to render specific pages (not entire PDF file) using react-pdf?
I am working on a React project for displaying pdf file as a flipbook using Nextjs and react-pageflip.
'use client'
import { useResizeObserver } from '@wojtekmaj/react-hooks'
import {
ForwardedRef,
...
0
votes
0
answers
407
views
Rendering Large PDFs in Chunks Using React-PDF (PDF.js)
I'm trying to render a large PDF file from my S3 storage in chunks using React-PDF (PDF.js). I'm fetching the first 64KB of the PDF with a byte range request, but the PDF fails to load, showing the ...
- 13
0
votes
0
answers
58
views
I can't insert a pdf into next js
import React, { useState } from 'react';
import ReactDOM from "react-dom";
import HTMLFlipBook from "react-pageflip";
import { pdfjs, Document, Page as ReactPdfPage } from "...
- 1
1
vote
1
answer
621
views
Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". when upgrade react pdf to 9.x
Today when I upgrade the react-pdf https://github.com/wojtekmaj/react-pdf version to 9.1.0, the pdf load failed and shows error:
Failed to load module script: Expected a JavaScript module script but ...
- 37.9k
0
votes
0
answers
133
views
Failed to load PDF File - react PDF
I am trying to view a pdf file the I am gonna get from an API, the API will return a pdf file, and then i am gonna process it as a blob so that the user can download it after viewing it, but I am ...
- 13
0
votes
0
answers
60
views
Image is rendered in white rather than the actual image using react-pdf in node.js
I am having a problem with showing images in my pdf generator that I am using @react-pdf/renderer, I switching the process of creating the PDF from client-side to server-side to reduce the load on the ...
- 13
0
votes
1
answer
168
views
Opening a PDF in a Blob Instead of a PDF Preview Component
I'm currently using BlobProvider to open a PDF document in a new tab as a blob. Here’s the code snippet I’m using:
<BlobProvider document={<OrderDocument data={orderData} />}> {({ url, ......
- 1
0
votes
1
answer
107
views
PDF created with react-pdf opened in new tab gives "Check Internet Connection" error when click download
I m using react-pdf to create a PDF and open it in new tab via Link component.
WindowTargetAttributes.BLANK = _blank
const document = (
<Document>
<Page size="A4" style={...
0
votes
0
answers
207
views
How to maintain code layout in PDF using jsPDF in React.js?
I am trying to generate a PDF that replicates the layout of my code using jsPDF in JavaScript. Previously, I attempted using html2canvas, but it converts the code layout into an image, resulting in ...
- 35
0
votes
0
answers
224
views
react-pdf + react-pageflip render problem
I'm using react-pageflip package with react-pdf. However, the PDF file is not rendered in browser.
import React, { useState } from 'react';
import HTMLFlipBook from 'react-pageflip';
import { Document,...
- 1
-1
votes
1
answer
87
views
How to disable copying text from the pdf rendered by @react-pdf/renderer?
Package using for creating pdfs: @react-pdf/renderer
I've tried setting an invisible layer over the pdf, but it doesn't work. I've also wrapping the PDFViewer component in a div with userSelect: None ...
- 367
0
votes
0
answers
84
views
React PDF content Height Calculations using html2canvas, jsPDF
I have this code to generate a pdf using html2canvas and jspdf. I have header and footer in all pdf pages and signature in first page(only). I have two questions.
1- how can I move content to next pdf ...
- 47
0
votes
2
answers
514
views
react-pdf font doesn't change
I'm trying to make a PDF that uses the courier font, but the file doesn't change to it
const styles = StyleSheet.create({
text: {
fontFamily: "Courier"
}
});
const MakePDF = ...
-1
votes
1
answer
165
views
Download PDF using react-pdf
I am using react-pdf for rendering Pdf file and it's working perfectly fine.
Below is the code for same:
<Document
inputRef={documentRef}
file={pdfUrl}
error=...
- 1,306
0
votes
0
answers
148
views
How to load a pdf and create an edited version Next.js
I would like to generate report.pdf which includes quite a lot of text and potentially images and other pdfs.
I managed to load a pdf in my browser with react and to create a pdf with text on the fly, ...
- 83
0
votes
1
answer
284
views
How to load base64 images into react-pdf?
I'm trying to get base64 images in a variety of formats (gif, png, jpg) to show in react-pdf.
{c.images.map((d) => {
const prefix = 'data:image/' + d.filename.split('.').pop() + ';base64,'
return &...
1
vote
0
answers
622
views
React Pdf don't show image
I use the React PDF Image library component and pass an image into it as shown in the documentation and tutorials on YouTube, but the image is not displayed, what could be the problem? To check the ...
- 11
0
votes
0
answers
235
views
React PDF: <View> height issues when using attribute wrap={false}
I am developing a small CRM (using React for the frontend) and one of the pages is connected to a database that stores information about all the works made from technicians for different customers. ...
- 1
0
votes
1
answer
282
views
Setting up a web worker using comlink
I have a worker file with the following code
import * as Comlink from "https://unpkg.com/comlink/dist/esm/comlink.mjs";
const renderPDFInWorker = async (props) => {
try {
const { ...
0
votes
1
answer
849
views
Custom font not working in @react-pdf/pdf Vite Typescript
I am building a React Vite Application and using @react-pdf/pdf.
I want to add custom font files which are .ttf
I import my font files from where they are. The path is correct:
import PrometoBold from ...
- 33
0
votes
1
answer
201
views
How can I get the PDFPage number from the PDFField using pdf-lib
I am using pdf-lib in my React TypeScript app. How can I get all the text fields in a PDFDocument with the page number on which that form field is.
const getAcroFieldRefs = (pdfDoc) => {
if (!...
1
vote
0
answers
38
views
Access to fetch from origin 'firebasestoragelink' has been blocked by CORS policy: 'No Access-Control-Allow-Origin'
It seems that the issue only occurs in the production environment, as fetching the URL and passing it to React-PDF works fine in local and development environments. However, when React-PDF attempts to ...
- 776
1
vote
2
answers
973
views
Issue with Creating a PDF Viewer Component in React using react-pdf
I'm encountering a problem with my code while attempting to create a PDFViewer component in React (using TypeScript) with the react-pdf library. Despite my efforts, it seems to be failing, and I'm ...
- 94
1
vote
0
answers
208
views
react pdf renderer, dynamic text (View) affecting the header(fixed) and footer(fixed) height
I want to render render a pdf which is a lab test which consists of Header(border, logo, hospital address,... etc) and in footer (some text) which has fixed height.
Ex layout:
Here, the header and ...
- 11
0
votes
0
answers
183
views
How to create a PDF using react-pdf/renderer in Express.js
I am trying to generate a PDF using some JSON data I will get from a source. Now I want to run this library in my Express.js application. However, I am running into errors related to babel and many ...
- 33
0
votes
1
answer
82
views
'react-pdf' adds html at after each page instead of just rendering the pages of the pdf file
I created next component:
import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = `//...
- 129
0
votes
1
answer
249
views
Deployment issue in viewing PDF using react-pdf
I used react-pdf to display a single-page PDF in a ReactJS application. It worked well during the development stage, but after deployment, it stopped working. It says, "Failed to load the pdf&...
user20555252
0
votes
0
answers
132
views
how make flipbook react-pdf with turn.js?
I first time build flipbook app. but here error. if possible help me for build this. Here Turn component I build turn.js and not problem this component. When I show pdf file i only see pdf file not ...
0
votes
0
answers
64
views
How can I eliminate the whitespace between pages when rendering a PDF as a single page using react-pdf?
I've merged two pages into one using pageNumber in react-pdf, but I'm struggling to remove the whitespace that appears where the second page starts.
How can I eliminate the whitespace at the bottom of ...
- 371