Aktualisieren Sie href und laden Sie die Datei herunter, indem Sie auf die Schaltfläche klicken.

Question

Ich versuche, eine Datei per Knopfdruck herunterzuladen. Meine spezifische Methode ist wie folgt:

1. Beim Klicken auf die Schaltfläche rufe ich eine API auf, die die gepufferten Daten der Datei zurückgibt.
2. Konvertieren Sie die gepufferten Daten in eine Base64-URL und aktualisieren Sie das href-Attribut des <a>-Elements mit dieser Base64-URL.
3. Rufen Sie das Click-Ereignis des <a>-Elements innerhalb der Funktion auf.

Diese Methode lädt die Datei herunter, aber sie lädt die Datei auf unbestimmte Zeit weiter herunter. Ich bin mir nicht sicher, warum das passiert, und habe keine Ahnung, wie ich das beheben kann.

So nenne ich diese Funktion.

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

Dies ist der Code der Funktion:

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

问题在于您重复使用了相同的a元素。因此，在getImage()的结尾处触发的点击事件会触发点击监听器，并再次调用getImage()，从而创建了无限循环的getImage()调用。

要解决这个问题，在getImage()中创建一个新的a元素，并将其用作脚本的"download" a。

例如：

const el = document.createElement('a')

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