在按鈕點擊時更新 href 並下載檔案。
P粉170438285
P粉170438285 2023-07-20 15:17:03
0
1
543

我試圖在點擊按鈕時下載一個檔案。我的具體方法如下:

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


#
P粉170438285
P粉170438285

全部回覆(1)
P粉807239416

問題在於您重複使用了相同的a元素。因此,在getImage()的結尾處觸發的點擊事件會觸發點擊監聽器,並再次呼叫getImage(),從而創建了無限循環的getImage()呼叫。

要解決這個問題,在getImage()中建立一個新的a元素,並將其用作腳本的"download" a。

例如:


const el = document.createElement('a')

el.href = imgSrc
el.download = 'image.jpg'
el.click() 
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板