js 文件下载

静态文件下载

当我们下载的文件是不改变、唯一的文件而不是临时生成的文件，我们可以将该文件部署到Nginx服务器上，然后得到它的url。最后根据a标签的download属性即可实现。

<!-- 点击图片，下载图片 -->
<a href="/images/logo.png" download="/images/logo.png">
	<img src="/images/logo.png">
</a>
<!-- download 属性定义了下载链接的地址。href 属性必须在 <a> 标签中指定。
属性同样可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。 -->

动态文件下载

这里的动态文件下载指的是临时生成的文件。常见的场景是，网页中常常有很多表格，表格中有很多数据，这里面的数据是动态变化的。我们想将网页中的表格下载下来变成xsl等文件。可以怎么做呢？
我们同样可以利用上面的a标签的download属性，只不过相应的a标签和download属性的值也要动态生成。具体来看：

<Button @click="handleClick(file)">下载</Button>
<script>
	import api from '@/server-api';
	
	......
	
	handleDownload (file) {
		  //发送ajax请求，请求接口定义在/server-api中，我们可以通过请求获取到blob二进制流文件。
	      api.download(file.id).then((blob) => {
	      	  // downloadFile函数，定义在下面，具体处理下载文件的逻辑。我们给它3个参数。
	          downloadFile(file.name, blob, {});
	      });
	      
		  // fileName:用来作为下载的文件的名。bolb：得到的文件内容。blobOptions：一个对象，用来配置
		  // 1.size:Blob 对象中所包含数据的大小（字节）。
		  // 2.type:一个字符串，表明该Blob对象所包含数据的MIME类型。
	      function downloadFile(fileName, blob, blobOptions) {
	      	  // 没传入配置选项时给空对象
	          blobOptions = blobOptions || {};
	          // 创建a标签
	          var a = document.createElement('a');
	          // 把fileName作为a标签的download的属性。
	          a.download = fileName;
	          // URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
	          //这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
	          a.href = URL.createObjectURL(blob);
	          // 插入a标签
	          document.body.appendChild(a);
	          // 创建鼠标事件
	          var evt = document.createEvent("MouseEvents");
	          // 类型为点击，不冒泡，不能用preventEvent。
	          evt.initEvent("click", false, false);
	          // 触发事件
	          a.dispatchEvent(evt);
	          // 移除a标签
	          document.body.removeChild(a);
	      }
	  },
</script>