前端常用方法之图片文件下载方式

一、下载哪种类型的文件？

比如图片、文本等

二、代码

代码如下（示例）：

methods:{
	handleDown(row){
	   const imageType = /.(jpg|jpeg|png|bmp)$/;
	   const  fileName = row.name || row.name2
	   //如果是图片类型的文件
	   if(fileName && imageType.test(fileName.trim().toLowerCase())){
	 	const type = fielName.trim().split('.')[fileName.trim().split('.').length - 1];
		let image = new Image();
		image.setAttribute('crossOrigin',anonymous);
		image.onload = function(){
			let canvas = document.createElement('canvas');
			canvas.width = image.width ;
	
			canvas.height = image.height;
			let context = canvas.getContext('2d');
			context.drawImage(image,0,0,image.width,image.height);
			let dataURL = canvas.toDataURL(`image/${type}`);
			let blob dataURLtoBlob(dataURL);
			cosnt url = {
				name:fileName,
				src:blob
			};
			if(window.navigator.msSaveOrOpenBlob){	//如果是IE浏览器
				navigator.msSaveBlob(url.src,url.name)
			}else{
				let link = document.crerateElement('a');
				link.setAttribute('href',window.URL.createObjectURL(url.src));
				link.setAttribute('download',url.name);	
				document.appendChild(link);
				link.click();
			}			
		};
		image.src = row.fileUrl;   
		/*
		*  @param {string} dataurl 前端将获取到的url 转为base64
		*  @ return {Blob} 返回Blob对象
		*/	
		function dataURLtoBolb(dataurl){
			let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length , u8arr = new Uint8Array(n);
			while(n--){
				u8arr[n] = bstr.charCodeAt(n)	
			}
			return new Blob([u8arr],{type:mime});
		}
	   }else{
		cosnt url = {
			name:fileName,
			src:fileUrl
		};
		if(window.navigator.msSaveOrOpenBlob){	
			navigator.msSaveBlob(url.src,url.name)
		}else{	
			let link = document.createElement('a');
			link.setAttribute('href',url.src);
			link.setAttribute('target','_blank');
			link.setAttribute('download',url.name);	
			document.appendChild(link);
			link.click();
		}
	   }
	}
}

小菜鸟总会慢慢成长，加油！