在按鈕點擊時更新 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()