我正在尝试单击按钮下载文件。我的具体做法如下:
1.在按钮上单击“I call an API which returns the files Buffer Data(我调用一个API,它返回缓冲区数据文件)”
1.将缓冲区数据转换为base64 url,并使用此base64 url更新<a>
元素的href
1.从函数内部调用对<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()
})
},
型
1条答案
按热度按时间ca1c2owp1#
问题是您正在重用相同的
a
元素。因此,在getImage()
结束时触发的click
事件会触发点击侦听器,并再次调用getImage()
,从而创建getImage()
调用的无限循环。要解决这个问题,请在
getImage()
中创建一个新的a
元素,并将其用作脚本的“下载”a
。举例来说:
字符串