vue实现静态文件下载

实现静态文件下载的方法

在Vue项目中实现静态文件下载，可以通过以下几种方式实现：

使用<a>标签直接下载

将静态文件放在public目录下，通过<a>标签的download属性实现下载。public目录中的文件会被直接复制到打包后的dist目录中。

<a href="/files/example.pdf" download>下载PDF文件</a>

通过JavaScript动态创建下载链接

如果需要动态触发下载或添加更多逻辑，可以通过JavaScript动态创建<a>标签并触发点击事件。

downloadFile() {
  const link = document.createElement('a');
  link.href = '/files/example.pdf';
  link.download = 'example.pdf';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

使用axios或fetch下载文件

如果需要从API获取文件或需要添加授权头等信息，可以使用axios或fetch下载文件。

downloadFile() {
  axios({
    url: '/api/download',
    method: 'GET',
    responseType: '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();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  });
}

使用第三方库

可以使用file-saver等第三方库简化下载流程。

import { saveAs } from 'file-saver';

downloadFile() {
  saveAs('/files/example.pdf', 'example.pdf');
}

注意事项

• 确保文件路径正确，静态文件应放在public目录中。
• 跨域下载可能需要服务器配置CORS。
• 大文件下载应考虑分片或进度提示。