[Elementor 教學] 如何點擊連結直接下載檔案

在製作頁面內容的時候,有時會上傳一些檔案,透過連結的方式讓使用者下載,不過通常預設點擊檔案連結會開啟一個新視窗再下載檔案,不是那麼的方便,這時候我們可以透過增加 HTML 的 download 屬性,來達到這個目的。

<a href="/images/mydownload.pdf" download>

在按鈕中新增 download 屬性

自訂屬性 (Custom Attributes) 的功能,可以在任何可以設定連結的 Elementor 小工具中使用,其中一個就是按鈕,你可以設定按鈕的連結,並設定自訂屬性。

  • 請點擊要編輯的按鈕來開啟小工具的設定介面
  • 點擊連結的齒輪按鈕來開啟額外的設定
  • 在 Custom Attributes 欄位輸入自定義屬性,屬性請以 key|value 的格式來輸入,如果有超過一個屬性,請以逗號(,)來分隔。
edit button custom attributes

以上圖為例我們新增了 download 屬性,後面接著的 myfile 則是下載檔案的新名稱,當使用者點擊該檔案時,該檔案將會被重新命名然後下載。如果你沒有輸入檔名,則會以原始的檔名來下載。

注意事項

使用 Custom Attributes 有幾點注意事項要留意:

  • 自定義屬性只能在能夠設定連結的小工具中設定,例如按鈕。在文字編輯器小工具中你無法直接設定(但你還是可以透過編輯原始文字的方式來自行加上屬性)
  • Chrome 65 和以上的版本以及 Firefox 只接受同源 (same-origin) 的連結網址,也就是你設定的檔案連結必須要和你的網站網址是相同的,不然會沒有作用。請參考,CanIUse 網站。
  • 基於安全的原因,你無法設定 Javascript 的屬性在連結上,例如 onclick

參考資料