vue生成并下载文件流图片_后端实现图片下载-CSDN博客

文章介绍了如何从后端获取流文件格式的图片，通过设置axios的responseType为blob来正确处理图片数据。生成Blob对象后，创建一个URL用于显示或下载图片。下载图片时，利用Image和Canvas解决跨域问题，转换为base64编码，最后通过创建并点击模拟下载事件实现图片的本地保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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;
},