在按钮点击时更新 href 并下载文件。

Question

我试图在点击按钮时下载一个文件。我的具体方法如下：

1. 在按钮点击时，我调用一个API，该API返回文件的缓冲数据。
2. 将缓冲数据转换为base64 URL，并使用这个base64 URL更新<a>元素的href属性。
3. 在函数内部调用<a>元素的点击事件。

这种方法会下载文件，但是它会无限地保持下载文件的状态，我不确定为什么会这样，并且不知道如何解决这个问题。

我是这样调用这个函数的。

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

这是函数的代码：

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()