1. The first method: downFile ( Download , save the name );
function downFile(content, filename) {
// create hidden download link
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// character content into a blob address
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// trigger click
document.body.appendChild(eleLink);
eleLink.click();
// then removed
document.body.removeChild(eleLink);
};
2. The second method:
<a href="/api/getImg" download="file.xlsx">下载</a>
download : This attribute instructs the browser to download URL instead of navigating to it, so the user will be prompted to save it as a local file. If the property has a value, this value will be pre-filled as the file name (if you need to, you can still change the file name) to save the download process. This property is no limit on the allowed values, but / and \ are converted to underscores. Most file system limits the file name of punctuation, therefore, recommended that the browser will adjust accordingly file name.
note:
( 1 ) . Applies only to homologous URL
( 2 ) Although the HTTP URL needs to be in the same source, may be used blob: URL and Data: the URL , to facilitate users to download JavaScript -generated content.
( 3 ) If the HTTP header is Content-Disposition attribute gives a file name different from this property, HTTP header attribute precedence over this attribute (usually the rear end disposed Content-Disposition: Attachment; filename = "filename.jpg" )
Shortcomings: IE does not support the download properties, can only be downloaded by the browser can not open a file type, pictures, text files, HTML files of this type can not directly download the browser can be opened only preview in a browser.
3 , DataURL or BlobUrl Realization
By DataUrl or BlobUrl can achieve pictures, text files, HTML does not directly download the preview, you can see the specific use of the article: https://blog.csdn.net/mo3408/article/details/90515277
4.location.href and iframe downloads
（1） location.href = 'template.xlsx'
（2）：
// no download flash excel
function download(url) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
function iframeLoad() {
console.log('iframe onload');
const win = iframe.contentWindow;
const doc = win.document;
if (win.location.href === url) {
if (doc.body.childNodes.length > 0) {
// response is error
}
iframe.parentNode.removeChild(iframe);
}
}
if ('onload' in iframe) {
iframe.onload = iframeLoad;
} else if (iframe.attachEvent) {
iframe.attachEvent('onload', iframeLoad);
} else {
iframe.onreadystatechange = function onreadystatechange() {
if (iframe.readyState === 'complete') {
iframeLoad;
}
};
}
iframe.src = '';
document.body.appendChild(iframe);
setTimeout(function loadUrl() {
iframe.contentWindow.location.href = url;
}, 50);
}
5.应用
axios({
method: 'post',
url: '/api/systemLog/downLoadLog',
data: bodyData,
responseType: 'arraybuffer'
}).then((res) => {
// type 为需要导出的文件类型，此处为xls表格类型
const blob = new Blob( [res.data], {type: 'application/vnd.ms-excel'} )
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
// 创建下载链接
const downloadHref = url.createObjectURL(blob)
// 创建a标签并为其添加属性
let downloadLink = document.createElement('a')
downloadLink.href = downloadHref
downloadLink.download = '导出日志.xlsx'
// 触发点击事件执行下载
downloadLink.click()
}
)
6.使用down2插件：
详细插件信息可以参考这篇文章：http://blog.ncmem.com/wordpress/2019/07/30/java%e4%b8%8b%e8%bd%bd%e5%a4%a7%e6%96%87%e4%bb%b6%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/