vue3 ts 下载url图片

在 Vue3 中使用 TypeScript 下载 URL 图片，你可以通过 Axios 或者 Fetch API 发送 HTTP 请求获取图片数据，然后使用 `FileSaver` 或者 `URL.createObjectURL()` 来保存或展示图片。这里是一个简单的例子：

首先安装所需的库（如果还没安装）：

npm install axios url-loader file-saver
# 或者使用 yarn
yarn add axios url-loader file-saver

接下来，在组件内：

import axios from 'axios';
import { saveAs } from 'file-saver';
import URL from 'url-loader';

// 使用 Axios 获取图片
export const downloadImage = async (imageUrl: string) => {
  try {
    // 配置 url-loader 用于处理 data URL
    const loaderOptions = { limit: 0, fallback: 'data:image/jpeg;base64,' };
    const response = await axios.get(imageUrl, { responseType: 'blob', responseTypeLoader: URL, responseTypeLoaderOptions: loaderOptions });
    
    // 将 blob 转换为文件并下载
    const urlObject = URL.createObjectURL(new Blob([response.data]));
    const linkElement = document.createElement('a');
    linkElement.href = urlObject;
    linkElement.download = 'image.jpg'; // 下载文件名自定义
    document.body.appendChild(linkElement);
    linkElement.click();
    // 清理临时 URL 对象
    setTimeout(() => URL.revokeObjectURL(urlObject), 0);
  } catch (error) {
    console.error('Error downloading image:', error);
  }
};

在模板中使用这个函数：

<button @click="downloadImage('your-image-url')">Download Image</button>