vue生成并下载文件流图片

该文章主要介绍从后端获取到流文件格式的图片，生成图片，并完成下载图片到本地

1. 生成流文件图片

在我们请求获取流文件图片时，需要注意的点是一定要添加请求头responseType: ‘blob’，不然图片会加载失败。

getIamge(){
    
    
	let data = {
    
    }
	axios({
    
    
	    method: 'post',
	    url: 'url/getEwm',  // 请求地址
	    data: data,   //请求参数
	    responseType: 'blob'
	}).then(res => {
    
    
	  const blob = new Blob([data.data], {
    
    
	      type: 'application/vnd.ms-excel',
	      crossOrigin: 'Anonymous'
	  })
	  var href = window.URL.createObjectURL(blob); 
	  this.imgSrc = href  // 获取到的图片路径
	})
}

2. 下载图片到本地

图片加载成功以后，完成下载图片到本地

// imgsrc：图片路径；name：图片名称 ；
downloadIamge(imgsrc, name) {
    
    
	var image = new Image();
	// 解决跨域 Canvas 污染问题
	image.setAttribute("crossOrigin", "anonymous");
	image.onload = function() {
    
    
	    var canvas = document.createElement("canvas");
	    canvas.width = image.width;
	    canvas.height = image.height;
	    var context = canvas.getContext("2d");
	    context.drawImage(image, 0, 0, image.width, image.height);
	    var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据'
	    var a = document.createElement("a"); // 生成一个a元素
	    var event = new MouseEvent("click", {
    
    
	        bubbles: true,
	        cancelable: true,
	        view: window
	    }); // 创建一个单击事件
	    a.download = name || "photo"; // 设置图片名称
	    a.href = url; // 将生成的URL设置为a.href属性
	    a.dispatchEvent(event); // 触发a的单击事件
	};
	image.src = imgsrc;
},