当前位置：首页 > VUE

vue实现静态文件下载

2026-02-09 13:51:22VUE

实现静态文件下载的方法

在Vue项目中实现静态文件下载，可以通过以下几种方式完成。静态文件通常放置在public目录或通过服务器路径访问。

使用`<a>`标签直接下载

将静态文件放在public目录下，通过<a>标签的download属性触发下载。

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

文件路径是相对于public目录的路径。download属性可以指定下载的文件名，如download="new-filename.pdf"。

通过编程方式下载

使用JavaScript动态创建下载链接，适用于需要逻辑判断的场景。

vue实现静态文件下载

downloadFile(filePath, fileName) {
  const link = document.createElement('a');
  link.href = filePath;
  link.download = fileName || filePath.split('/').pop();
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

调用方法示例：

this.downloadFile('/files/example.pdf', 'custom-name.pdf');

使用Blob对象下载

适用于需要从API获取文件数据或动态生成内容的场景。

downloadBlob(content, fileName, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.click();
  URL.revokeObjectURL(url);
}

调用示例：

vue实现静态文件下载

const content = 'Hello, world!';
this.downloadBlob(content, 'hello.txt', 'text/plain');

使用第三方库

对于复杂需求，可以使用file-saver库简化操作。

安装库：

npm install file-saver

使用示例：

import { saveAs } from 'file-saver';

// 下载文本
saveAs(new Blob(['Hello, world!'], { type: 'text/plain' }), 'hello.txt');

// 下载远程文件
fetch('/files/example.pdf')
  .then(res => res.blob())
  .then(blob => saveAs(blob, 'example.pdf'));