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

<template>
    <span>
      <a
        :class="[customClass, { 'link-disabled': isDownloading }]"
        @click.prevent="handleClick"
        v-tooltip:top="tooltip ? tooltip : ''">
        <slot></slot>
        <span v-if="isDownloading && showSpinner" class="spinner"></span>
      </a>
    </span>
  </template>

  <script>
  export default {
    props: {
        url: {
            type: String,
            required: true,
        },
        isUrlProtected: {
            type: Boolean,
            default: false
        },
        customClass:{
            type: String,
            default: ''
        },
        tooltip:{
            type: String,
            default: ''
        },
        showSpinner: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            isDownloading: false
        };
    },
    methods: {
        async download() {
            fetch(this.url, {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + this.$store.getters.getAccessToken,
                },
            })
            .then((response) => {
                if (response.status === 200) {
                    const contentDisposition = response.headers.get('Content-Disposition');
                    const filename = contentDisposition ? contentDisposition.split('filename=')[1] : 'downloaded_file';

                    return response.blob()
                    .then((blob) => {
                        const blobUrl = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = blobUrl;
                        a.download = filename;
                        a.style.display = 'none';
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        window.URL.revokeObjectURL(blobUrl);
                    });
                } else {
                    console.error('Request failed with status:', response.status);
                }
                this.isDownloading = false;
            })
            .catch((error) => {
                console.error('Network error:', error);
                this.isDownloading = false;
            });
        },
        handleClick(){
            this.isDownloading = true;
            if(window.LARAVEL_VAPOR_ENABLED){
                this.submit(this.url, 'get', this.section, false, false);
            }
            else if(this.isUrlProtected)
            {
                this.download();
            }
            else{
                window.open(this.url, '_blank');
                this.isDownloading = false;
            }
        },
        successHandler(response) {
            if(window.LARAVEL_VAPOR_ENABLED){
                if (response.payload !== undefined && response.payload.src) {
                    window.open(response.payload.src, '_blank');
                }
                else if (response.src) {
                    // window.location.href = response.src;
                    window.open(response.src, '_blank');
                }
            }
            this.isDownloading = false;
        },
        errorHandler(error) {
            this.isDownloading = false;
        },
    },
  };
  </script>
<style scoped>
    /* .a-link {
        display: inline-block;
        transition: transform 0.3s ease-in-out;
        position: relative;
    } */

    .spinner {
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-left-color: #000;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .link-disabled {
        pointer-events: none;
        opacity: 0.6;
        border: none;
    }
</style>