How to render PDF in react?

Question

I want to render PDF file in my web application. and also want to support scrolling, zooming in, and zooming out. So I used react-pdf-js, but I can not found how to zooming in/out and scrolling. I also tried to use mozilla's pdf.js in react, but failed. I need some advice about how to render PDF file in react with scrolling, zooming in and out...Thanks for your time and help.

score 3 · Accepted Answer · answered Dec 20 '18 at 16:48

Just use <iframe/> to insert your pdf. It works on most of browsers.

e.g.

<iframe src="your path"/>

Most of browsers have their own embedded pdf renderer, but some browsers may not support it (e.g. IE), you can find more information in here:HTML embedded PDF iframe

score 1 · Answer 2 · answered Dec 20 '18 at 11:57

1

<ReactPDF
  file={{
    url: 'http://www.example.com/sample.pdf'
  }}
/>

use ReactPDF package it will be simple and small

answered Dec 20 '18 at 11:57

kishore kingmaker

476
3
15

score 1 · Answer 3 · answered Sep 26 '19 at 19:12

1

If you use react-pdf you can zoom-in or out using the prop scale it takes a decimal value separated by .

It supports scrolling but you can wrap the document in a div with max-height and add overflow-y: auto that will add the Y scroll bar.

<DocumentWrapper>
  <Document file="file-url">
      <Page pageNumber={this.state.pageNumber} scale={this.state.scale}/>
  </Document>
</DocumentWrapper>

Where DocumentWrapper is a styled component

const DocumentWrapper = styled("div")({
  maxHeight: "600px",
  overflowY: "auto"
});

answered Sep 26 '19 at 19:12

lele

442
6
14

Where is the `styled` function coming from? – Saul Feliz Aug 05 '21 at 10:25
styled-components, nothing to do with react-pdf, it was my custom implementation https://styled-components.com/docs/basics#styling-any-component – lele Aug 05 '21 at 20:30

score 0 · Answer 4 · answered Jan 02 '21 at 23:24

You can use https://cloudpdf.io/. Which support zooming in and zooming out

import React, { useRef, useEffect } from "react";
import "./styles.css";
import CloudPdfViewer from "@openbook/cloudpdf-viewer";

export default function App() {
  const viewer = useRef(null);
  useEffect(() => {
    CloudPdfViewer(
      {
        documentId: "eee2079d-b0b6-4267-9812-b6b9eadb9c60",
        darkMode: true
      },
      viewer.current
    ).then((instance) => {});
  }, []);
  return (
    <div className="app">
      <div className="viewer" ref={viewer}></div>
    </div>
  );
}

How to render PDF in react?

4 Answers4