Kemas kini href dan muat turun fail pada klik butang.

Question

Saya cuba memuat turun fail dengan mengklik butang. Kaedah khusus saya adalah seperti berikut:

1. Apabila klik butang, saya memanggil API yang mengembalikan data buffer fail.
2. Tukar data penimbal kepada URL base64 dan kemas kini atribut href bagi elemen <a>
3. Panggil acara klik elemen <a>

Kaedah ini akan memuat turun fail, tetapi ia akan terus memuat turun fail selama-lamanya, saya tidak pasti mengapa ini berlaku dan tidak tahu bagaimana untuk membetulkannya.

Beginilah cara saya memanggil fungsi ini.

<button v-on:click="this.getImage([imageID, imageName], $event)"><a>View scoresheet</a></button>

Ini adalah kod fungsi:

getImage: async function(info, event){
    fetch('endpoint' + String(info[0]) + "/" + String(info[1]) , {
        method: 'GET',
      
        })
        .then(response => response.json())
        .then(async result => {
             var image_data = await result.image_buffer.data
             var imgSrc = "data:image/jpg;base64," + btoa(
                 image_data.reduce((data, byte) => data + String.fromCharCode(byte), '')
             );

             event.target.href = imgSrc
             event.target.download = 'image.jpg'
             event.target.click()
        })
    },

Answer 1

Masalahnya ialah anda menggunakan semula elemen yang sama. Jadi peristiwa klik yang dicetuskan pada penghujung getImage() mencetuskan pendengar klik dan getsImage() dipanggil semula, mewujudkan gelung tak terhingga bagi panggilan getImage().

Untuk menyelesaikan masalah ini, cipta elemen baharu dalam getImage() dan gunakannya sebagai "muat turun" skrip.

Contohnya:

const el = document.createElement('a')

el.href = imgSrc
el.download = 'image.jpg'
el.click()