vue实现下载图片
使用 <a> 标签下载图片
通过动态创建 <a> 标签并设置 download 属性实现下载。需注意跨域图片需服务端支持或使用代理。
// 方法封装
function downloadImage(url, filename) {
const a = document.createElement('a');
a.href = url;
a.download = filename || 'image.jpg';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// Vue中调用
this.downloadImage('https://example.com/image.jpg', 'my-image.jpg');通过 Canvas 处理跨域图片
若图片跨域且无法修改服务端配置，可通过 Canvas 转换后下载。需确保图片允许跨域访问（crossOrigin 属性）。
function downloadCrossOriginImage(url, filename) {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob((blob) => {
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename || 'image.png';
a.click();
URL.revokeObjectURL(blobUrl);
}, 'image/png');
};
img.src = url;
}使用 Axios 下载二进制图片
适用于需要添加请求头或处理鉴权的场景，通过将响应数据转为 Blob 实现下载。
import axios from 'axios';
async function downloadWithAxios(url, filename) {
try {
const response = await axios.get(url, {
responseType: 'blob',
headers: { Authorization: 'Bearer xxx' } // 可选请求头
});
const blobUrl = URL.createObjectURL(response.data);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename || 'image.jpg';
a.click();
URL.revokeObjectURL(blobUrl);
} catch (error) {
console.error('下载失败:', error);
}
}注意事项
- 跨域限制：直接下载跨域图片可能失败，需服务端设置
Access-Control-Allow-Origin或使用代理。 - 文件名后缀：确保
download属性中的文件名包含正确后缀（如.jpg,.png）。 - Blob 内存释放：通过
URL.revokeObjectURL()释放创建的 Blob URL 避免内存泄漏。
以上方法可根据实际场景选择，普通下载推荐第一种，复杂场景（如鉴权、跨域）推荐第三种。
