React renderer for creating PDF files on the browser and server
Questions tagged [react-pdf]
409 questions
25
votes
8 answers
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')
I'm using the react-pdf/renderer package to add functionality to download a pdf from my website. But I'm getting this error message: ./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from…

r121
- 2,478
- 8
- 25
- 44
21
votes
4 answers
How can i create a table using the react-pdf library for generation pdf report?
As the react-pdf library offering some limited component and no html tag is allowed to render in reactpdfrenderer.So i am in a trouble to make table using this library?
Can any one please help me how can i create a table using this react-pdf library…

Nayan Dey
- 313
- 1
- 2
- 10
15
votes
7 answers
Create react app - how to copy pdf.worker.js file from pdfjs-dist/build to your project's output folder?
Since I can't use browser's pdf viewer in the network where the app is going to be used, I am testing a react-pdf package for loading PDF's with React.
I have made a component where I am sending a url of my PDF that I get from backend:
import React,…

Leff
- 1,968
- 24
- 97
- 201
14
votes
1 answer
React PDF viewer component rerenders constantly
I am using a React PDF viewer in my project. I have a react mui dialog component that I use with react draggable to drag it around.
import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import makeStyles from…

Ludwig
- 1,401
- 13
- 62
- 125
11
votes
2 answers
React-PDF Slow Performance with large PDF
I am using React-PDF from npm, with the PDFDownloadLink function to download a large pdf. But the PDF is being created on my app load created a long lag time.
I have tried timers, lazy loading the component, changing the document data with a…

eesteban
- 316
- 4
- 10
10
votes
2 answers
Error "render is a Node specific API" when using the module @react-pdf/renderer
Using the module @react-pdf/renderer with official example (https://snyk.io/advisor/npm-package/@react-pdf/renderer):
import ReactPDF, { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles…

Zhihar
- 1,306
- 1
- 22
- 45
10
votes
3 answers
React pdf-renderer does not display characters č, ć and đ
I'm using @react-pdf/renderer version "1.6.8". However, am unable to get the following characters: čćđ. Instead get empty spaces.
The characters are from the Croatian language and can be tested on their official…

EugenSunic
- 13,162
- 13
- 64
- 86
9
votes
5 answers
How to do word wrap with react-pdf
I have a pdf that is rendering as expected except for an issue where when a very long word is included in the info for the page, instead of wrapping the word onto a newline the word just continues right out the container, off the page, out the door…

Haq.H
- 863
- 7
- 20
- 47
9
votes
4 answers
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
I have the issue with Jest and react-pdf

Will Graham
- 340
- 1
- 3
- 16
9
votes
1 answer
How to fill an entire page with one image in react-pdf?
I am trying to make one pdf page as one base64 image using react-pdf in my reactjs web application.
and I have tried everything that I know of for making the image as an A4 size
image and fill the image completely so that one image comes as one…

Harry
- 389
- 1
- 6
- 18
8
votes
0 answers
react-pdf cannot use import statement outside a module
I'm using react-pdf to render PDFs in React via CRA, and I import it like this:
import { Document, Page } from "react-pdf/dist/esm/entry.webpack";
Now, I'm trying to implement SSR with this webpack config:
// webpack.server.conf
const path =…

Max Filippov
- 2,024
- 18
- 37
8
votes
1 answer
How to add custom font in react-pdf/pdf
Can anyone say how to add custom font with @react-pdf/pdfkit in react.js?
I tried to use doc.registerFont(path, font_family)
But its showing an error like Unhandled Rejection (Error): fontkit.openSync unavailable for browser build
Can anyone help…

Ajil Paul
- 185
- 1
- 1
- 8
8
votes
2 answers
Display a PDF in the browser in a modal from blob data using react-pdf (@react-pdf/renderer)
I am using the handy react-pdf library to render/display/download pdf's in my React site. I have my PDF's stored on the server. I have a call to the server that sends back the PDF in blob form. Now I want to display that PDF in the browser in a…

dmikester1
- 1,374
- 11
- 55
- 113
8
votes
1 answer
How to change height or width of pdf in react (npm react-pdf)
Change the loaded pdf layout (height and width) in react-pdf.
This includes :
Load pdf in reactjs
Modify height and width of pdf.

Rahul Sarma
- 763
- 2
- 8
- 17
8
votes
3 answers
Printing generated QR codes on a PDF file
I'm creating a ReactJS app that uses QR codes and I want to be able to print a PDF document with a batch of codes at once. I'm currently using both react-qr-svg to generate the codes and @react-pdf/renderer to create the document. The problem is…

Eddy Aguirre
- 83
- 1
- 1
- 4