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>
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>