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

<template>
    <div class="row parentContainer">
        <div class="col">
            <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5 requestModal pointer" @click="loadFile" data-type="filePreview">
                <i class="fa fa-file-image-o fs-10"></i>
            </div>
            <modal-component styleType="fill-in" type="filePreview">
                <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                <div class="row">
                    <div class="col text-center">
                        <img :src="src" class="w-100" v-if="type !== 'pdf'">
                        <canvas ref="canvas" v-if="type === 'pdf'" />
                    </div>
                </div>
            </modal-component>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            file: {
                type: Object,
                required: true
            },

        },
        data(){
            return {
                isLoading: false,
                loaded: false,
                src: ''
            }
        },
        computed: {
            type() {
                return this.file.file.mime_type === 'application/pdf' ? 'pdf' : 'image'
            }
        },
        methods:{
            loadFile(){
                if(!this.loaded) {
                    this.isLoading = true;
                    let filePath = this.type === 'pdf' ? this.file.file.file_info.original.file : this.file.file.file_info[0].original.file;
                    this.submit(this.route('api.storage.document.file', filePath), 'get', 'imagePreviewSection', false, false)
                }
            },
            renderPdf() {
                this.isLoading = true;
                var pdfjsLib = window['pdfjs-dist/build/pdf'];

                pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

                var loadingTask = pdfjsLib.getDocument({data: this.src});
                loadingTask.promise.then(function(pdf) {

                    // Fetch the first page
                    var pageNumber = 1;
                    pdf.getPage(pageNumber).then(function(page) {

                        var scale = 1.5;
                        var viewport = page.getViewport({scale: scale});

                        // Prepare canvas using PDF page dimensions
                        var canvas = $(this.$refs.canvas);
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        // Render PDF page into canvas context
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        var renderTask = page.render(renderContext);
                        renderTask.promise.then(function () {
                            console.log('Page rendered');
                        });
                    });
                }, function (reason) {
                    // PDF loading error
                    console.error(reason);
                });
            },
            successHandler(response){
                this.loaded = true;
                this.src = response.payload.src;
                this.isLoading = false;

                if(this.type === 'pdf'){
                    this.renderPdf()
                }

            },
            errorHandler(error, statusCode){
                this.src = statusCode === 404 ? 'images/3231370.jpg' : 'images/2942005.jpg'
                this.isLoading = false;
            }
        },

    }
</script>

<style scoped>

</style>