当前位置：首页 > article >正文

vue 文件下载实现

article 2025/1/17 20:07:57

最近在vue 里面遇到需要下载文件的功能，我就整理一下

第一种方法：

直接 a 标签，然后 href 里面的下载地址，download 属性是文件名，点击即可下载。

<a :href="fileUrl" :download="fileName">下载文件</a>

export default {
  data() {
    return {
      fileUrl: '/path/to/file.pdf',
      fileName:'文件名'
    };
  },
};

效果：直接浏览器新窗口打开文件，提示下载

第二种方法：

还是 a 标签，只是我用的是element里面的链接标签，然后写一个点击事件，点击下载。

<el-link :underline="false" type="primary" @click="handlePreviewGy(item)" style="line-height:20px">{{ item.name }}</el-link>

handlePreviewGy(file) {
    let fileUrl = file.url;
    window.open(fileUrl, '_blank');
}

效果：这个也是新窗口打开，中间过程会出现一个空白页，用户体验不是很好。有兴趣的可以试一下

第三种方法：

模拟生成一个a 标签，然后设置下载链接，下载名称，点击触发下载方法就行

handlePreviewGy(file) {
   let link = document.createElement('a'); // 创建一个 元素
   link.href = file.url;  //设置链接的 href 属性
   link.download = file.name;  //设置文件名
   link.style.display = 'none'; // 隐藏元素
   document.body.appendChild(link); //将链接添加到文档中
   link.click(); // 模拟点击，触发下载
   document.body.removeChild(link); //下载完成，删除元素
},

效果：这个效果也是新窗口打开，效果跟第一种相同

第四种方法：

创建一个隐藏的iframe，设置src，点击触发下载

handlePreviewGy(file) {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = file.url;
   document.body.appendChild(iframe);
}

效果：这个效果是当前窗口，直接触发下载。不出现新窗口

注意点：

如果文件是 .docx .xlsx 这样的文件，浏览器会触发下载。但是如果是 png,jpg 之类的，不会触发

因为 图片类的浏览器通常会尝试在浏览器中显示而不是下载，因此可以修改服务器的响应头，强制浏览器下载文件，这个就比较麻烦了，视情况而定。

第五种方法：

使用 fetch 或 axios 下载文件并修改响应头

 async downloadFile(file) {
     const fileUrl = file.url;
       try {
           const response = await fetch(fileUrl);
           const blob = await response.blob();
           const blobUrl = URL.createObjectURL(blob);
           const link = document.createElement('a');
           link.href = blobUrl;
           link.download = file.name;
           link.style.display = 'none';
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
       } catch (error) {
           console.error('Error downloading file:', error);
       }
   }