1、js動态建立标記下載下傳圖檔或檔案
注意:該方法如果下載下傳url和通路域名不同,也會導緻某些浏覽器解析并打開圖檔,加上target="_blank"的好處,不會在原先頁面上打開圖檔。
dom元素可以通過 .文法為其添加(标簽上的屬性)
const handleDownload = (file) => {
const url = file.url; // 圖檔位址
let a = document.createElement("a"); // 建立一個a節點插入的document
const event = new MouseEvent("click"); // 模拟滑鼠click點選事件
a.download = file.name; // 設定a節點的download屬性值
a.target = "_blank"; // 打開新視窗下載下傳圖檔
a.href = url; // 将圖檔的src指派給a節點的href
a.dispatchEvent(event); // 觸發滑鼠點選事件
a = null; // 防止記憶體洩露
};
function downloadImg(){
const url = 'http://www.a.com/pic.jpg'; // 圖檔位址
let a = document.createElement('a'); // 建立一個a節點插入的document
const event = new MouseEvent('click') // 模拟滑鼠click點選事件
a.download = '圖檔名字' // 設定a節點的download屬性值
a.target = '_blank' // 打開新視窗下載下傳圖檔
a.href = url; // 将圖檔的src指派給a節點的href
a.dispatchEvent(event) // 觸發滑鼠點選事件
a = null // 防止記憶體洩露
}
2、利用window.open()下載下傳檔案
注意:适用于下載下傳一些壓縮包、word檔案等浏覽器無法解析的檔案
window.open('http://www.a.com/pic.jpg', '_blank')
3、解決圖檔下載下傳問題的終極方案
檔案過大的情況下,響應會很慢
function downloadIamge(imgsrc, name) {
const x = new XMLHttpRequest()
x.open('GET', imgsrc, true)
x.responseType = 'blob'
x.onload = function(e) {
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a')
a.href = url
a.download = name
a.click()
}
x.send()
}
<a href="down.jpg" download="name" target="_blank">
</a>