地址URL
方式一
window.downloadFile = function (sUrl) {
//iOS devices do not support downloading. We have to inform user about this.
if (/(iP)/g.test(navigator.userAgent)) {
alert('Your device does not support files downloading. Please try again in desktop browser.');
return false;
}
//If in Chrome or Safari - download via virtual link click
if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
//Creating new link node.
var link = document.createElement('a');
link.href = sUrl;
if (link.download !== undefined) {
//Set HTML5 download attribute. This will prevent file from opening if supported.
var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
link.download = fileName;
}
//Dispatching click event.
if (document.createEvent) {
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
link.dispatchEvent(e);
return true;
}
}
// Force file download (whether supported by server).
if (sUrl.indexOf('?') === -1) {
sUrl += '?download';
}
window.open(sUrl, '_self');
return true;
}
window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
問題
1丈氓、QQ瀏覽器下載文件會(huì)崩潰
1>將window.open(sUrl, '_self');改為window.open(sUrl, '_blank');
2>判斷是否為QQ瀏覽器桨嫁，如果是，則新窗口打開當(dāng)前網(wǎng)址玻蝌。
getBrowserInfo () {
var ua = navigator.userAgent.toLocaleLowerCase();
var browserType=null;
if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
browserType = "IE";
browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
} else if (ua.match(/firefox/) != null) {
browserType = "火狐";
}else if (ua.match(/ubrowser/) != null) {
browserType = "UC";
}else if (ua.match(/opera/) != null) {
browserType = "歐朋";
} else if (ua.match(/bidubrowser/) != null) {
browserType = "百度";
}else if (ua.match(/metasr/) != null) {
browserType = "搜狗";
}else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
browserType = "QQ";
}else if (ua.match(/maxthon/) != null) {
browserType = "遨游";
}else if (ua.match(/chrome/) != null) {
var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
function _mime(option, value) {
var mimeTypes = navigator.mimeTypes;
for (var mt in mimeTypes) {
if (mimeTypes[mt][option] == value) {
return true;
}
}
return false;
}
if(is360){
browserType = '360';
}else{
$('html').css("zoom",".80");
}
}else if (ua.match(/safari/) != null) {
browserType = "Safari";
}
return browserType
},
downloadFile(url)
if (this.getBrowserInfo() === 'QQ') {
const { href } = this.$router.resolve({
name: "donation",
});
window.open(href, '_blank');
}
2蟹肘、IE瀏覽器接口沒獲取到鏈接地址
所以我把下載的地址寫死了
window.location.origin + '/api/web/fundMessagePublic/download?id=' + id
兼容IE
判斷
window.downloadFile.isIE = function () {
if(!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
方式1
if (window.downloadFile.isIE()) {
var elemIF = document.createElement("iframe");
elemIF.src = sUrl;
elemIF.style.display = "none";
document.body.appendChild(elemIF);
elemIF.click()
}
方式2
if (window.navigator.msSaveBlob) {
try {
window.navigator.msSaveBlob(url, downloadFileName);
}
catch (e) {
console.log(e);
}
}
方式二
npm install --save ly-downloader
使用時(shí)需傳入3個(gè)參數(shù) download(type, data, name)：
- type: 1 或 2（ 用于判斷傳入的是地址還是canvas對(duì)象 ）
- data: type = 1 時(shí)傳入文件地址； type = 2 時(shí)傳入一個(gè)canvas對(duì)象（ 配合html2canvas使用 ）
- name: 下載圖片默認(rèn)文件名（ type = 1 時(shí)設(shè)置’'為地址默認(rèn)文件名, type = 2 時(shí) name 不能為空 ）
注：name 參數(shù)雖然只有在下載文件類型為圖片時(shí)生效俯树，但為避免出錯(cuò)都需要傳入一個(gè)值
例：download(1, url, ‘’) 或 download(2, canvas對(duì)象, ‘圖片附件’)
import download from 'ly-downloader'
download(1, url, '文件名')
思路簡(jiǎn)介：
- 創(chuàng)建 a 標(biāo)簽帘腹，href 傳入文件地址，download 寫上文件名许饿，觸發(fā)點(diǎn)擊事件實(shí)現(xiàn)文件另存為（設(shè)置文件名對(duì)非圖片類型文件無效）
- 圖片類型文件使用地址下載會(huì)直接打開竹椒，需要將圖片地址利用 canvas 獲取 baase64 格式文件，再由 base64 轉(zhuǎn)換為 blob 類型米辐，最后利用URL.createObjectURL() 方法獲取 blob 文件的地址胸完，此類型地址傳入 a 標(biāo)簽可實(shí)現(xiàn)不打開直接下載
- type = 2 這種情況是個(gè)人經(jīng)常遇到頁面截圖下載的場(chǎng)景，配合插件html2canvas 來使用非常方便翘贮，原理還是根據(jù) canvas 對(duì)象一步步轉(zhuǎn)換成 blob 對(duì)象
源碼：
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = download;
/**
* 下載文件
*
* @export
* @param {*} type 設(shè)置接收數(shù)據(jù)類型 參數(shù) 1 或 2
* @param {*} data type為 1 時(shí) data 為文件地址赊窥； type為 2 時(shí) data 為canvas對(duì)象
* @param {*} name 當(dāng)文件為圖片類型時(shí)需設(shè)置文件名
*/
function download(type, data, name) {
if (type == 1) {
var url = data;
// 通過地址判斷是否為圖片類型文件
var ext = url.slice(url.lastIndexOf('.') + 1).toLowerCase();
if (isImage(ext)) {
convertUrlToBase64(url).then(function (base64) {
var blob = convertBase64UrlToBlob(base64);
// 下載
if (myBrowser() == 'IE') {
window.navigator.msSaveBlob(blob, name + '.jpg');
} else {
var a = document.createElement('a');
a.download = name;
a.href = URL.createObjectURL(blob);
a.click();
}
});
} else {
var a = document.createElement('a');
a.download = name;
a.href = url;
a.click();
}
} else {
var dataURL = data.toDataURL('image/jpeg', 1.0);
var base64 = {
dataURL: dataURL,
type: 'image/jpg',
ext: 'jpg'
};
var blob = convertBase64UrlToBlob(base64);
// 下載
if (myBrowser() == 'IE') {
window.navigator.msSaveBlob(blob, name + '.jpg');
} else {
var _a = document.createElement('a');
_a.download = name;
_a.href = URL.createObjectURL(blob);
_a.click();
}
}
}
/**
* 將 base64 轉(zhuǎn)換位 blob 對(duì)象
* blob 存儲(chǔ) 2進(jìn)制對(duì)象的容器
* @export
* @param {*} base64
* @returns
*/
function convertBase64UrlToBlob(base64) {
var parts = base64.dataURL.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
/**
* 將圖片地址轉(zhuǎn)換為 base64 格式
*
* @param {*} url
*/
function convertUrlToBase64(url) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
var dataURL = canvas.toDataURL('image/' + ext);
var base64 = {
dataURL: dataURL,
type: 'image/' + ext,
ext: ext
};
resolve(base64);
};
});
}
// 判斷瀏覽器類型
function myBrowser() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
if (userAgent.indexOf("OPR") > -1) {
return "Opera";
}; //判斷是否Opera瀏覽器 OPR/43.0.2442.991
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判斷是否Firefox瀏覽器 Firefox/51.0
if (userAgent.indexOf("Trident") > -1) {
return "IE";
} //判斷是否IE瀏覽器 Trident/7.0; rv:11.0
if (userAgent.indexOf("Edge") > -1) {
return "Edge";
} //判斷是否Edge瀏覽器 Edge/14.14393
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
} // Chrome/56.0.2924.87
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判斷是否Safari瀏覽器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
}
// 判斷文件是否為圖片類型
function isImage(ext) {
if (ext == 'png' || ext == 'jpg' || ext == 'jpeg' || ext == 'gif' || ext == 'bmp') {
return true;
}
}
方式三
// 保存到本地并自動(dòng)點(diǎn)擊
function saveAs(data, name) {
const urlObject = window.URL || window.webkitURL || window;
const export_blob = new Blob([data]);
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}
// 下載含有url的文件
function downloadUrlFile(url, fileName) {
const url2 = url.replace(/\\/g, '/');
const xhr = new XMLHttpRequest();
xhr.open('GET', url2, true);
xhr.responseType = 'blob';
//xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
// 為了避免大文件影響用戶體驗(yàn)，建議加loading
xhr.onload = () => {
if (xhr.status === 200) {
// 獲取文件blob數(shù)據(jù)并保存
saveAs(xhr.response, fileName);
}
};
xhr.send();
}
downloadUrlFile(url, fileName);
文件流
const content = res.data;
const blob = new Blob([content])
const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '文件.xlsx'
if ('download' in document.createElement('a')) { // 非IE下載
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 釋放URL 對(duì)象
document.body.removeChild(elink)
} else { // IE10+下載
navigator.msSaveBlob(blob, fileName)
}
兼容性說明
谷歌和火狐支持a標(biāo)簽的download屬性狸页，ie有自帶的msSaveBlob方法锨能，或者用其他方式實(shí)現(xiàn)扯再。
下載說明
有時(shí)候你下載后發(fā)現(xiàn)直接打開了，只要不是在瀏覽器中打開址遇，就是下載完成了熄阻。有可能電腦設(shè)置了下載自動(dòng)使用某軟件打開。還可以從瀏覽器中的下載記錄去查看倔约，有記錄則下載成功秃殉，不必糾結(jié)。
