Vue3如何下载静态文件

Vue3可以使用axios或者fetch等工具来下载静态文件。以下是一个使用axios下载文件的示例：

1. 首先，确保你已经安装了axios。在终端中运行以下命令安装axios：

npm install axios

2. 在你的Vue组件中，导入axios：

import axios from 'axios';

3. 创建一个方法来下载文件：

methods: {
  downloadFile() {
    axios({
      url: 'http://example.com/path/to/file.pdf',
      method: 'GET',
      responseType: 'blob', // 注意这里设置为'blob'
    })
    .then((response) => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'file.pdf');
      document.body.appendChild(link);
      link.click();
    })
    .catch((error) => {
      console.error(error);
    });
  },
},

4. 在需要触发下载的地方调用该方法：

<button @click="downloadFile">下载文件</button>

请将 `url` 替换为你要下载的文件的实际URL。在上述示例中，我们将文件保存为 `file.pdf`。

这样，当用户点击按钮时，文件将会自动下载到他们的设备上。