Mettez à jour href et téléchargez le fichier en cliquant sur le bouton.

Question

J'essaie de télécharger un fichier en cliquant sur un bouton. Ma méthode spécifique est la suivante :

1. En cliquant sur le bouton, j'appelle une API qui renvoie les données mises en mémoire tampon du fichier.
2. Convertissez les données mises en mémoire tampon en URL base64 et mettez à jour l'attribut href de l'élément <a>
3. Appelez l'événement click de l'élément <a>

Cette méthode téléchargera le fichier, mais elle continuera à télécharger le fichier indéfiniment, je ne sais pas pourquoi cela se produit et je n'ai aucune idée de comment résoudre ce problème.

C'est ainsi que j'appelle cette fonction.

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

Voici le code de la fonction :

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

Le problème est que vous réutilisez le même élément. Ainsi, l'événement click déclenché à la fin de getImage() déclenche l'écouteur de clic et getsImage() est à nouveau appelé, créant une boucle infinie d'appels getImage().

Pour résoudre ce problème, créez un nouvel élément a dans getImage() et utilisez-le comme a "téléchargement" du script.

Par exemple :

const el = document.createElement('a')

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