对于一些浏览器不支持打开的文件都好办些。能打开的包括 html文件,pdf和图片等要特殊处理
下载使用a标签。
a标签下有一个download属性
此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。如果属性有一个值,那么此值将在下载保存过程中作为预填充的文件名(如果用户需要,仍然可以更改文件名)。此属性对允许的值没有限制,但是 /
和 \
会被转换为下划线。大多数文件系统限制了文件名中的标点符号,故此,浏览器将相应地调整建议的文件名。
注意:
- 此属性仅适用于同源 URL。
- 尽管 HTTP URL 需要位于同一源中,但是可以使用
blob:
URL 和data:
URL ,以方便用户下载使用 JavaScript 生成的内容(例如使用在线绘图 Web 应用程序创建的照片)。 - 如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名,HTTP 头属性优先于此属性。
- 如果 HTTP 头属性
Content-Disposition
被设置为inline(即Content-Disposition='inline'
),那么 Firefox 优先考虑 HTTP 头Content-Disposition
download 属性。
对于图片下载推荐
- PC端,使用 download 。
- 移动端, 长按保存图片。
以下对于js下载文件类工具函数
function download (url) {
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
if (isChrome || isSafari) {
var link = document.createElement('a');
link.href = url;
if (link.download !== undefined) {
var fileName = url.substring(url.lastIndexOf('/') + 1, url.length);
link.download = fileName;
}
if (document.createEvent) {
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
link.dispatchEvent(e);
return true;
}
}
if (url.indexOf('?') === -1) {
url += '?download';
}
window.open(url, '_self');
return true;
}
其他情况都与后台的请求头有关,告知浏览器需要以什么格式是读取还是下载。后台的请求说了算。。除了前端设置外。后台的设置至关重要!!!