exchange-2.0/resources/assets/vue/components/general/elements/PdfViewerComponent.vue

<!-- <template>
    <div>
        <div class="row">
            <div class="col-sm-4">
                <a :href="fileUrl">
                    <canvas ref="canvas" />
                </a>
            </div>
        </div>
    </div>
</template>
<script>
    import * as pdfjsLib from 'pdfjs-dist/es5/build/pdf.js';
    pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

    export default {
        props: {
            fileUrl: {
                type: String,
            },
            width: {
                type: Number,
                default: 200,
            },
            height: {
                type: Number,
                default: 200,
            },
        },
        mounted() {
            this.renderThumbnails()
        },
        methods: {
            async renderThumbnails() {
                const worker = new pdfjsLib.PDFWorker();

                let pdf = await pdfjsLib
                    .getDocument({ data: this.src, worker: worker })
                    .promise.then((pdf) => pdf);

                const page = await pdf.getPage(1);

                let viewport = page.getViewport({ scale: 1.0 });
                viewport = page.getViewport({ scale: this.width / viewport.width });

                let canvas = $(this.$refs.canvas);
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const context = canvas.getContext('2d');

                await page.render({ canvasContext: context, viewport: viewport })
            },
        },
    }
</script> -->