vue.js 更新href和下载文件的按钮点击

ia2d9nvy  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(141)

我正在尝试单击按钮下载文件。我的具体做法如下:
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()
        })
    },

ca1c2owp

ca1c2owp1#

问题是您正在重用相同的a元素。因此,在getImage()结束时触发的click事件会触发点击侦听器,并再次调用getImage(),从而创建getImage()调用的无限循环。
要解决这个问题,请在getImage()中创建一个新的a元素,并将其用作脚本的“下载”a
举例来说:

const el = document.createElement('a')

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

字符串

相关问题