前端-文件下载

最新推荐文章于 2024-04-24 16:35:38 发布

kelly0721

最新推荐文章于 2024-04-24 16:35:38 发布

阅读量229

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/kelly0721/article/details/110681925

版权

前端专栏收录该内容

47 篇文章 3 订阅

订阅专栏

一、通过文件地址下载

a 标签有个属性值 href,包含超链接指向的 URL 或 URL 片段

如果链接是一个网址,那么就会打开这个网址
如果链接是一个浏览器无法识别的文件,那么就会下载这个文件
如果链接是一个浏览器可识别的文件,那么就会打开这个文件

其中浏览器可识别的文件包括: html、css、js以及各种图片格式(jpg、png、gif等) 不可解析的文件包括: zip、mp4等

二、通过 HTML5 download 属性下载

HTML5 新出了一个属性: download

此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 / 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。

也就是说,可以利用 download 为文件另起名,也可以动态下载文件.download 的值是下载文件的文件名,如果该值为空,那么取文件的默认名称

<a  href="xxx/test-1205.zip" download="test.zip">下载</a>

这样就会下载一个文件名为 test 的zip包
此外,这个方法可用来下载浏览器可识别的文件

<a  href="xxx/test-1205.png" download="test.png">下载</a>

这样就会下载 test.png 这个文件

使用该属性前,可以先监测当前浏览器是否支持download属性

var isSupportDownload = 'download' in document.createElement('a');

注意: 此属性仅适用于同源 URL。如果不是同源URL那么会按照默认方式处理,即浏览器可识别的文件直接打开,不能识别的文件下载到本地

三、通过 HTML5 Blob 属性下载

如果是非同源文件,可是又想下载图片文件,可以尝试转化图片到二进制再下载.
原理其实很简单，我们可以将文本或者JS字符串信息借助Blob转换成二进制，然后，作为a 标签的href属性，配合download属性，实现下载
（兼容Chrome,Firefox,ie）

var funDownload = function (content, filename) {
	if (window.navigator.msSaveOrOpenBlob) {
		var blob = new Blob([content]);
	   navigator.msSaveBlob(blob, fileName);
	} else {
	    // 创建隐藏的可下载链接
	    var eleLink = document.createElement('a');
	    eleLink.download = filename;
	    eleLink.style.display = 'none';
	    // 字符内容转变成blob地址
	    var blob = new Blob([content]);
	    eleLink.href = URL.createObjectURL(blob);
	    // 触发点击
	    document.body.appendChild(eleLink);
	    eleLink.click();
	    // 然后移除
	    document.body.removeChild(eleLink);
   }
};

content 指需要下载的文本或字符串内容，filename指下载到系统中的文件名称
不止是.html文件，.txt、 .json等只要内容是文本的文件，都是可以利用这种小技巧实现下载的。

在Chrome浏览器下，模拟点击创建的 a 元素即使不append到页面中，也是可以触发下载的，但是在Firefox浏览器中却不行，因此，上面的funDownload()方法有一个appendChild和removeChild的处理，就是为了兼容Firefox浏览器。msSaveOrOpenBlob 是为了兼容ie浏览器下载文件

四、关于a标签的其他知识点

<!--标签属性href，使其指向空或不返回任何内容。如：-->
<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>

<a href="javascript:;" >点此无反应javascript:</a>

<!--标签事件onclick，阻止其默认行为。如：-->
<a href="" onclick="return false;">return false;</a>

<a href="#" onclick="return false;">return false;</a>

连接到外部地址

<!-- anchor linking to external file -->
<a href="http://www.mozilla.com/">
External Link
</a>

链接到本页的某个部分

<!-- links to element on this page with id="attr-href" -->
<a href="#属性">
Description of Same-Page Links
</a>

创建一个可点击的图片

<a href="https://developer.mozilla.org/en-US/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" 
       alt="MDN logo" />
</a>

创建一个email链接,这是常见的创建按钮或链接，将用户的电子邮件程序打开，让他们发送新邮件。这是通过使用一个mailto链接完成的。

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

使用 download 属性将保存为 PNG 格式
如果你想允许用户下载一个HTML画布，你可以创建一个下载属性和画布数据作为文件URL链接图像：

var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);