Questions tagged [react-pdf]

React renderer for creating PDF files on the browser and server

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
1
2 3
27 28