How to create Simple PDF reader using PDF.js and React

How to create Simple PDF reader using PDF.js and React

  • English
  • Programming
  • JavaScriptJavaScript
  • (1293)
  • Project length: 6h 41m

Hi there, today's session (5th of november) is pushed to next week's sunday, sorry for pushing it last minute. I will also modify the contents of the session, as the 3rd and last one is actually pretty thick. What will happen is that I will probably prepare some of it before streaming, then present what was done. And then do the rest during the streaming. Thanks for your patience and hope to see you there! This tutorial will cover all the details (resources, tools, languages etc.) that are necessary to build a simple PDF reader app in React. You will be guided through all the steps and concepts, starting from the basic ones like setting up the right tools and frameworks to the more advanced topics related to the development. And ultimately you will be able to create your own advanced PDF reader app!

Overview

What are the requirements?

  • JavaScript (ES6/ES7 recommended but will be explained a bit as well)
  • Promises (we will be using async/await with an explanation)
  • Basic React understanding
  • HTML/CSS
  • Git to be able to clone
  • Yarn or nvm/npm experience
  • Webpack (strongly recommended but not required)
  • Chrome or Opera browser preferred

What is the target audience?

Those who

  • want to learn about how have a basic use of mozilla’s pdf.js library
  • want to see how to create a simple app with React
  • want to get familiar with writing js in ES6/ES7

When are the streaming sessions (streaming schedule)?

  • Every Sunday at 2pm EST

Project Outline

Session 1: Setting-up the Environment

  • Setting up the programming environment in windows but will also be explained for mac/linux
  • At the end of the session you have a React skeleton app up and running and see the changes directly when you save your changes in the code!

Session 2: Load a pdf file in the browser and have a basic display with pdf.js

We will create three components during this session

  • A component to upload a pdf file to the browser using DropZone.js
  • A component to display a pdf page (no text selection)
  • A component that will use the two previous components and make them work together to load a pdf file and then display it

Session 3: Improve pdf file display and add UI to pilot the pdf display

  • Display multiple pages
  • Make text selectable
  • Zoom in and out
  • Sidebar to show a preview of the pages and click on them to jump to the page

Reviews

Average rating

5(1293 Reviews)
  • Avatar

    DingZhen

    18 days ago

    good