shipping-portal/resources/assets/vue/components/general/elements/DocumentFileViewerComponent.vue

<template>
    <div class="row parentContainer">
        <div class="col">
            <div class="requestModal pointer h-100" @click="loadFile" data-type="filePreview">
                <slot name="button" ></slot>
            </div>
            <modal-component styleType="fill-in" size="extra-large" 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'">
                        <div class="btn btn-complete pointer m-b-20" @click="openBase64NewTab()" v-show="type === 'pdf'">Open in new window</div>
                        <iframe v-if="type === 'pdf'" class="pdf-display w-100 scrollable" style="height: 80vh" :src="'data:application/pdf;base64,'+src"></iframe>
                    </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 = false;
            },
            openBase64NewTab() {
                console.log(this.src);
                var blob = this.base64toBlob(this.src);
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(blob, "pdfBase64.pdf");
                } else {
                    const blobUrl = URL.createObjectURL(blob);
                    window.open(blobUrl);
                }
            },
            base64toBlob(base64Data) {
                const sliceSize = 1024;
                const byteCharacters = atob(base64Data);
                const bytesLength = byteCharacters.length;
                const slicesCount = Math.ceil(bytesLength / sliceSize);
                const byteArrays = new Array(slicesCount);

                for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
                    const begin = sliceIndex * sliceSize;
                    const end = Math.min(begin + sliceSize, bytesLength);

                    const bytes = new Array(end - begin);
                    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
                        bytes[i] = byteCharacters[offset].charCodeAt(0);
                    }
                    byteArrays[sliceIndex] = new Uint8Array(bytes);
                }
                return new Blob(byteArrays, { type: "application/pdf" });
            },
            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>