CODEWITHSUNDEEP
reactjspdf
abbey
abbey

Reputation: 223

How to render PDF in react?

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.

Upvotes: 0

Views: 14537

Answers (4)

Bob Singor
Bob Singor

Reputation: 578

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>
  );
}

Upvotes: 0

lele
lele

Reputation: 500

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"
});

Upvotes: 1

Danny Lau
Danny Lau

Reputation: 142

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

Upvotes: 3

kishore kingmaker
kishore kingmaker

Reputation: 476

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

use ReactPDF package it will be simple and small

Upvotes: 1

Related Questions