Build a CloudPDF PDF Viewer or Reader in React.js,Angular,Vue.js and Vanilla Javascript Full Project For Beginners


Welcome folks today in this blog post we will be building a pdf viewer with the help of cloudpdf library in react.js,angular,vue.js and vanilla javascript. All the full source code of the application is shown below.




In Vanilla javascript



<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CloudPDF - viewer</title>
      body, html {
        height: 100%;
        margin: 0px;
  <body style="height: 100%">
    <div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
    <script type="text/javascript" src=""></script>
      const config = { 
        documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
        darkMode: true
      CloudPDF(config, document.getElementById('viewer')).then((instance) => {



In React.js



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



In Angular



import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import CloudPdfViewer from "@openbook/cloudpdf-viewer";
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent implements AfterViewInit {
  @ViewChild("viewer", { static: false }) viewer: ElementRef;
  ngAfterViewInit(): void {
        documentId: "eee2079d-b0b6-4267-9812-b6b9eadb9c60",
        darkMode: true
    ).then((instance) => {});



In Vue.js



  <div id="webviewer" ref="viewer"></div>
import PDFViewer from "@openbook/cloudpdf-viewer";
export default {
  name: "PDFViewer",
  props: {
    id: String,
  mounted() {
        darkMode: true,


Leave a Reply