javascript實(shí)現(xiàn)文件另存為(web api)
廣告:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
</head>
<body>
<script type="text/javascript">
function _download(url,name) {
var pdfurl=url;
var fileName = name;
// 創(chuàng)建對象
var xhr = xhr = new XMLHttpRequest()
// 創(chuàng)建一個 GET 請求,異步
xhr.open('GET', pdfurl, true);
// 設(shè)置返回數(shù)據(jù)的類型為arraybuffer
//xhr.responseType = 'arraybuffer';
xhr.responseType = 'blob' ;
// 設(shè)置請求頭值
//xhr.setRequestHeader(KEYS.JWTToken, getStorageItem(KEYS.JWTToken));
// 接收到完整的響應(yīng)數(shù)據(jù)時觸發(fā)回調(diào)處理函數(shù)
xhr.onload = function() {
if (this.status === 200) {
// 獲取請求頭Content-Type的值,用來判斷是否是文件流下載
var type = xhr.getResponseHeader('Content-Type')
// application/json;charset=UTF-8:就是指“無類型”,一般的字節(jié)流用于數(shù)據(jù)傳輸,非文件下載
if (type === 'application/json;charset=UTF-8') {
// this.response為arraybuffer對象,轉(zhuǎn)為uint8數(shù)組
// var uint8 = new Uint8Array(this.response)
// 解決使用fromCharCode后中文亂碼的問題
// var resToString = decodeURIComponent(escape((String.fromCharCode(...uint8))))
// var message = JSON.parse(resToString).message
// console.log(message)
// return
}
// Blob()的第一個參數(shù)必須為數(shù)組,即使只有一個字符串也必須用數(shù)組裝起來
var blob = new Blob([this.response], {type: type})
// window.navigator.msSaveBlob:以本地方式保存文件
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, fileName)
} else {
var URL = window.URL || window.webkitURL
// 創(chuàng)建新的URL表示指定的File對象或者Blob對象
var objectUrl = URL.createObjectURL(blob)
if (fileName) {
// 創(chuàng)建a標(biāo)簽用于跳轉(zhuǎn)至下載鏈接
var a = document.createElement('a')
// download:指示瀏覽器下載URL而不是導(dǎo)航到它,也可設(shè)置下載文件的名稱
if (typeof a.download === 'undefined') {
// window.location:獲得當(dāng)前頁面的地址 (URL),并把瀏覽器重定向到新的頁面
window.location = objectUrl
} else {
// href屬性指定下載鏈接
a.href = objectUrl
// dowload屬性指定文件名
a.download = fileName
// 將a標(biāo)簽插入body中
document.body.appendChild(a)
// click()事件觸發(fā)下載
a.click()
// 去除a標(biāo)簽,以免影響其他操作
a.remove()
}
} else {
window.location = objectUrl
}
// 將URL釋放
URL.revokeObjectURL(objectUrl)
}
}
}
xhr.send();
}
</script>
<a href="javascript:void(0);" onClick="_download();" >下載</a>
</body>
</html>
廣告: