前端下载利器FileSaver

前言：想必很多小伙伴都用过 a标签拿来下载的吧，里面很多坑相信也知道了，用起来真的是超级简单。使用方法如下：

href: 文件的绝对/相对地址

download: 文件名（可省略，省略后浏览器自动识别源文件名）

<a href='xxx.jpg' download='file.jpg'>下载jpg图片</a>

那么既然这么简单，那肯定是存在问题的。

上面这张图片是官方提供的兼容性，目前只有FireFox和Chrome支持download属性。对于图片文件和文本文件这种可以被浏览器打开的文件不会被下载，而excel和安装包这种文件是可以被直接下载的。

那么能不能不让浏览器预览图片(或pdf或txt文件)？

肯定能啊～为什么呢？其实a标签的href属性还可以接受除了相对和绝对路径之外的其他形式Url，比如下面我们要用到的DataUrl和BlobUrl。我们使用这种形式，就可以让浏览器不预览而直接下载图片了，当然了操作起来更麻烦一些了就。

• DataUrl

  // 首先，图片转base64
  	// ./util.js
  	// html页面，将a标签href属性动态赋值为dataUrl
  	<a id='downloadDataUrl' class="button is-dark">下载data:Url图片</a>
  	...
  	<script>
  		const image = new Image();
  		image.setAttribute("crossOrigin", 'Anonymous');
  		image.src = '../files/test-download.png' + '?' + new Date().getTime();
  		image.onload = function() {
  			const imageDataUrl = image2base64(image);
  			const downloadDataUrlDom = document.getElementById('downloadDataUrl');
  			downloadDataUrlDom.setAttribute('href', imageDataUrl);
  			downloadDataUrlDom.setAttribute('download', 'download-data-url.png');
  			downloadDataUrlDom.addEventListener('click', () => {
  				console.log(
  					'下载文件'
  				);
  			});
  		}
  	</script>
  

如下图，可以看到不再是预览文件，而是直接下载文件了。这里面有一些坑，比如canvas.toDataUrl的一些问题以及解决办法，我就不多说了，大家自己去看看。

• BlobUrl 整体逻辑更复杂了，首先 文件 -> base64(dataUrl) -> blob -> blobUrl

  	// 第一步：首先需要将文件转换成base64，方法上面一样
  	// 第二步：将base64转换成blob数据
  	// DataUrl 转 Blob数据
  	<script type="text/javascript">
  		function dataUrl2Blob(dataUrl) {
  			var arr = dataUrl.split(','),
  				mime = arr[0].match(/:(.*?);/)[1],
  				bStr = atob(arr[1]),
  				n = bStr.length,
  				unit8Array = new Uint8Array(n);
  			while (n--) {
  				unit8Array[n] = bStr.charCodeAt(n);
  			}
  			return new Blob([unit8Array], {
  				type: mime
  			});
  		}
  		// 第三步： 将blob数据转换成BlobUrl
  		URL.createObjectURL(imageBlobData);
  		// 完整代码 
  		
  		<!-- <a id= 'downloadBlobUrl' class = "button is-danger" >下载blobUrl图片</a> ... -->
  		
  		const image2 = new Image();
  		image2.setAttribute("crossOrigin", 'Anonymous');
  		image2.src = '../files/test-download.png' + '?' + new Date().getTime();
  		image2.onload = function() {
  			const imageDataUrl = image2base64(image2);
  			const imageBlobData = dataUrl2Blob(imageDataUrl);
  			const downloadDataUrlDom = document