vuefilemanager/resources/js/components/FilePreview/Media/PdfFile.vue

<template>
    <div
        class="absolute bottom-0 top-0 left-0 right-0 z-10 mx-auto overflow-y-auto rounded-xl md:p-5"
        :style="{ width: documentSize + '%' }"
    >
        <pdf
            :src="pdfData"
            v-for="i in numPages"
            :key="i"
            :resize="true"
            :page="i"
            scale="page-width"
            id="printable-file"
            class="mx-auto mb-6 w-full overflow-hidden md:rounded-xl md:shadow-lg"
        >
            <template slot="loading">
                <b>
                    {{ $t('loading content...') }}
                </b>
            </template>
        </pdf>
    </div>
</template>

<script>
import { events } from '../../../bus'
import pdf from 'pdfvuer'

export default {
    name: 'PdfFile',
    components: {
        pdf,
    },
    props: [
		'file',
	],
    watch: {
        file() {
            this.getPdf()
        },
    },
    data() {
        return {
            pdfData: undefined,
            documentSize: 50,
            numPages: 0,
        }
    },
    methods: {
        getPdf() {
            this.pdfData = undefined
            this.numPages = 0

            let self = this

            self.pdfData = pdf.createLoadingTask(this.file.data.attributes.file_url)

            self.pdfData.then((pdf) => (self.numPages = pdf.numPages))
        },
        getDocumentSize() {
            if (window.innerWidth < 960) {
                this.documentSize = 100
            }

            if (window.innerWidth > 960) {
                this.documentSize = localStorage.getItem('documentSize')
                    ? parseInt(localStorage.getItem('documentSize'))
                    : 50
            }
        },
        zoomIn() {
            if (this.documentSize < 100) {
                this.documentSize += 10
                localStorage.setItem('documentSize', this.documentSize)
            }
        },
        zoomOut() {
            if (this.documentSize > 40) {
                this.documentSize -= 10
                localStorage.setItem('documentSize', this.documentSize)
            }
        },
    },
    created() {
        this.getDocumentSize()
        this.getPdf()

        events.$on('document-zoom:in', () => this.zoomIn())
        events.$on('document-zoom:out', () => this.zoomOut())
    },
}
</script>

<style src="pdfvuer/dist/pdfvuer.css" lang="css"></style>