vue3 下载图片到本地

在Vue3中，下载图片到本地通常通过`FileSaver.js`库或者`Blob`对象配合`URL.createObjectURL()`方法来实现。以下是一个简单的步骤：

1. 首先，你需要安装`file-saver`库，可以使用npm或yarn进行安装：

   npm install file-saver
   # 或者
   yarn add file-saver

2. 引入库并使用它。假设你有一个`url`变量存储了图片的源地址：

   import { saveAs } from 'file-saver';

   const downloadImage = async (imageUrl) => {
     const response = await fetch(imageUrl);
     const blob = await response.blob();
     saveAs(blob, 'image.jpg'); // 保存为'image.jpg'
   };

3. 调用这个函数，传入图片链接：

   downloadImage('your-image-url');

4. 如果你想处理用户取消下载的情况，可以监听`AbortController`：

   const controller = new AbortController();
   const downloadLink = document.createElement('a');
   downloadLink.href = URL.createObjectURL(blob);
   downloadLink.download = 'image.jpg';
   downloadLink.addEventListener('click', () => {
     return new Promise((resolve, reject) => {
       downloadLink.onloadend = resolve;
       downloadLink.onerror = reject;
       downloadLink.click();
     }, { signal: controller.signal });
   });

   const abortButton = document.createElement('button');
   abortButton.textContent = 'Cancel Download';
   abortButton.addEventListener('click', () => controller.abort());

   // 将按钮添加到DOM，以便用户可以取消下载
   document.body.appendChild(abortButton);

   // 开始下载
   downloadImage('your-image-url', controller);

记得处理错误，并在不需要时清除`URL.createObjectURL()`以释放内存。