vue3下载图片到本地
时间: 2023-08-26 17:13:55 浏览: 72
在Vue3中下载图片到本地,可以使用以下方法:
1. 首先,需要在Vue3组件中引入一个下载插件,如file-saver:
```javascript
import { saveAs } from 'file-saver';
```
2. 在需要下载图片的方法中,先将图片转换为Blob对象:
```javascript
const imgUrl = 'https://example.com/image.jpg'; // 图片地址
fetch(imgUrl).then(res => res.blob()).then(blob => {
// 将Blob对象保存到本地
});
```
3. 然后,使用saveAs方法将Blob对象保存到本地:
```javascript
saveAs(blob, 'image.jpg'); // 第一个参数是Blob对象,第二个参数是保存的文件名
```
完整代码示例:
```javascript
<template>
<div>
<button @click="downloadImg">下载图片</button>
</div>
</template>
<script>
import { saveAs } from 'file-saver';
export default {
name: 'DownloadImage',
methods: {
downloadImg() {
const imgUrl = 'https://example.com/image.jpg'; // 图片地址
fetch(imgUrl).then(res => res.blob()).then(blob => {
saveAs(blob, 'image.jpg'); // 将Blob对象保存到本地
});
}
}
}
</script>
```