vue如何下载图片还不是预览
时间: 2023-09-10 19:13:04 浏览: 49
你可以通过创建一个链接来下载图片,具体实现方法如下:
1. 通过 `axios` 或 `fetch` 请求图片数据,并将其转换为 `Blob` 对象:
```javascript
axios.get('http://example.com/image.jpg', { responseType: 'blob' })
.then(response => {
const blob = response.data;
// 下载图片
});
```
2. 创建一个链接,并将 `Blob` 对象赋值给链接的 `href` 属性:
```javascript
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
```
3. 设置链接的下载属性 `download`,并将链接添加到 DOM 中:
```javascript
link.download = 'image.jpg';
document.body.appendChild(link);
```
4. 触发链接的点击事件,开始下载图片:
```javascript
link.click();
```
完整的代码如下:
```javascript
axios.get('http://example.com/image.jpg', { responseType: 'blob' })
.then(response => {
const blob = response.data;
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'image.jpg';
document.body.appendChild(link);
link.click();
});
```
这样就可以在不预览图片的情况下下载图片了。