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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CloudPDF - viewer</title>
    <style>
      body, html {
        height: 100%;
        margin: 0px;
      }
    </style>
  </head>
  <body style="height: 100%">
    <div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
    <script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
    <script>
      const config = { 
        documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
        darkMode: true
      };
      CloudPDF(config, document.getElementById('viewer')).then((instance) => {
        
      });
    </script>
  </body>
</html>
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>
  );
}
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import CloudPdfViewer from "@openbook/cloudpdf-viewer";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild("viewer", { static: false }) viewer: ElementRef;
  ngAfterViewInit(): void {
    CloudPdfViewer(
      {
        documentId: "eee2079d-b0b6-4267-9812-b6b9eadb9c60",
        darkMode: true
      },
      this.viewer.nativeElement
    ).then((instance) => {});
  }
}
<template>
  <div id="webviewer" ref="viewer"></div>
</template>
<script>
import PDFViewer from "@openbook/cloudpdf-viewer";
export default {
  name: "PDFViewer",
  props: {
    id: String,
  },
  mounted() {
    PDFViewer(
      {
        documentId: this.id,
        darkMode: true,
      },
      this.$refs.viewer
    );
  },

Leave a Comment