how to use vuejs with pdfjs

Solutions on MaxInterview for how to use vuejs with pdfjs by the best coders in the world

showing results for - "how to use vuejs with pdfjs"
Marlene
19 Jun 2016
1<template>
2  <div id="pageContainer">
3    <div id="viewer" class="pdfViewer"></div>
4  </div>
5</template>
6
7<script>
8import pdfjsLib from "pdfjs-dist/build/pdf";
9import { PDFViewer } from "pdfjs-dist/web/pdf_viewer";
10import "pdfjs-dist/web/pdf_viewer.css";
11
12pdfjsLib.GlobalWorkerOptions.workerSrc =
13  "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.worker.min.js";
14
15
16export default {
17  name: "PdfViewer",
18  mounted() {
19    this.getPdf();
20  },
21  methods: {
22    async getPdf() {
23      let container = document.getElementById("pageContainer");
24      let pdfViewer = new PDFViewer({
25        container: container
26      });
27      let loadingTask = pdfjsLib.getDocument("./pdf-sample.pdf");
28      let pdf = await loadingTask.promise;
29      pdfViewer.setDocument(pdf);
30    }
31  }
32};
33</script>
34
35<style>
36#pageContainer {
37  margin: auto;
38  width: 80%;
39}
40
41div.page {
42  display: inline-block;
43}
44</style>
Camil
20 Aug 2018
1<template>
2  <div id="app">
3    <PdfViewer/>
4  </div>
5</template>
6
7<script>
8import PdfViewer from "./components/PdfViewer";
9
10export default {
11  name: "App",
12  components: {
13    PdfViewer
14  }
15};
16</script>
17
18<style>
19#app {
20  font-family: "Avenir", Helvetica, Arial, sans-serif;
21  -webkit-font-smoothing: antialiased;
22  -moz-osx-font-smoothing: grayscale;
23  text-align: center;
24  color: #2c3e50;
25  background-color: black;
26  padding: 50px;
27}
28</style>