Inspired from https://github.com/yurydelendik/pdfjs-react

pdfjs-viewer.vue

<template>
    <div class="pdfjs-viewer-container">
        <div class="pdfjs-viewer-toolbar">
            <button @click="zoomOut">Zoom Out</button>
            <button @click="zoomIn">Zoom In</button>
            <button @click="changeScale('page-fit')">Page Fit</button>
            <button @click="changeScale('page-width')">Page Width</button>
            <button @click="changeScale('page-height')">Page Height</button>
            <button @click="changeScale(1)">Actual</button>
            <button :disabled="!firstPage" @click="changePage(firstPage)">First Page</button>
            <button :disabled="!previousPage" @click="changePage(previousPage)">Previous Page</button>
            <button :disabled="!nextPage" @click="changePage(nextPage)">Next Page</button>
            <button :disabled="!lastPage" @click="changePage(lastPage)">Last Page</button>
            <div class="zoomPercent">{{(this.scale * 100).toFixed(1)}}% || {{this.currentPage}} / {{this.totalPages}}</div>
        </div>
        <div class="pdfjs-viewer">
            <div class="pdfViewer"></div>
        </div>
    </div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist/webpack';
import { PDFJS as PDFJSViewer } from 'pdfjs-dist/web/pdf_viewer.js';
import 'pdfjs-dist/web/pdf_viewer.css';

export default {
    name: 'pdfjs-viewer',
    props: {
        pdfUrl: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            _eventBus: null,
            _pdfViewer: null,
            scale: null,
            totalPages: 1,
            currentPage: 1
        }
    },
    computed: {
        nextPage() {
            return this.currentPage < this.totalPages ? this.currentPage + 1 : null;
        },
        previousPage() {
            return this.currentPage > 1 ? this.currentPage - 1 : null;
        },
        lastPage() {
            return this.totalPages > 1 ? this.totalPages : null;
        },
        firstPage() {
            return this.totalPages > 1 ? 1 : null;
        }
    },
    methods: {
        zoomIn() {
            this.changeScale(this.scale * 1.1);
        },
        zoomOut() {
            this.changeScale(this.scale / 1.1);
        },
        changeScale(newScale) {
            this._pdfViewer.currentScaleValue = newScale;
        },
        changePage(newPage) {
            this._pdfViewer.currentPageNumber = newPage;
        }
    },
    created() {
        let eventBus = new PDFJSViewer.EventBus();
        eventBus.on('pagesinit', (e) => {
            this.changeScale('page-width');
        });
        eventBus.on('scalechange', (e) => {
            this.scale = e.scale;
        });
        eventBus.on('pagechange', (e) => {
            this.currentPage = e.pageNumber;
        });
        this._eventBus = eventBus;
    },
    mounted() {
        let viewerContainer = this.$el.querySelector('.pdfjs-viewer');
        this._pdfViewer = new PDFJSViewer.PDFViewer({
            container: viewerContainer,
            eventBus: this._eventBus,
        });

        let loadingTask = pdfjsLib.getDocument(this.pdfUrl);
        loadingTask.promise.then((doc) => {
            this._pdfViewer.setDocument(doc);
            this.totalPages = doc.numPages;
        }, (reason) => {
            console.error(`Error during ${this.pdfUrl} loading: ${reason}`);
        });
    }
}
</script>
<style scoped>
.pdfjs-viewer-container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.pdfjs-viewer-toolbar {
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
}

.pdfjs-viewer {
    position: relative;
    height: calc(100% - 60px);
    width: 100%;
    overflow: auto;
    background-color: #444;
}
</style>