【前端学习记录】下载功能实现小记

最新推荐文章于 2024-12-11 10:08:33 发布

Note_creek

最新推荐文章于 2024-12-11 10:08:33 发布

阅读量630

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端学习

本文链接：https://blog.youkuaiyun.com/Note_creek/article/details/134988690

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过模拟a标签和接口实现下载功能，包括创建隐藏a元素、设置URL和文件名，以及针对不同浏览器的兼容处理。还提及了利用axios和Blob处理下载请求，并考虑了响应拦截器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在项目中，通常会遇到很多需要下载的需求，那么应该如何处理下载功能呢？

通过模拟a标签实现下载

直接上代码

<template>
  <div>
    <p @click="downloadFile" style="cursor: pointer; color: blue;">Download File</p>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      // 替换成你要下载的文件的URL
      const fileUrl = 'https://example.com/path/to/your/file.txt';

      // 创建一个隐藏的<a>元素
      const downloadLink = document.createElement('a');
      downloadLink.href = fileUrl;
      downloadLink.download = 'downloaded_file.txt'; // 可以设置下载后的文件名

      // 将<a>元素添加到文档中
      document.body.appendChild(downloadLink);

      // 触发点击事件
      downloadLink.click();

      // 移除<a>元素
      document.body.removeChild(downloadLink);
    }
  }
};
</script>

我们使用了@click监听点击事件，当用户点击文本时，downloadFile方法会被调用。该方法与之前的纯HTML/JS示例相似，创建一个隐藏的<a>元素，设置文件的URL和下载文件名，触发点击事件，然后移除<a>元素。

通过接口实现下载

这种方式也比较常见，这里以Vue搭配axios为例实现该功能。请求时需要加上responseType: 'blob',，接下来以实际的例子来说明

downloadFile() {
      // 替换成你的下载接口的URL
      const downloadUrl = 'https://example.com/api/download';

      axios({
        url: downloadUrl,
        method: 'GET',
        responseType: 'blob', // 设置响应类型为 blob
      })
      .then(response => {
		// 处理文件下载
	    let blob = new Blob([res.data]);
	    let downloadElement = document.createElement('a');
	    let href = window.URL.createObjectURL(blob);
	    let fileName = 'downloaded_file.txt';
	    if ('msSaveOrOpenBlob' in navigator) {
	      // 检查该函数在 navigator 对象中是否可用
	      window.navigator.msSaveOrOpenBlob(blob, fileName);
	    } else {
	      downloadElement.href = href;
	      // 设置下载文件名字
	      downloadElement.download = fileName;
	      document.body.appendChild(downloadElement);
	      downloadElement.click();
	      // 释放资源
	      document.body.removeChild(downloadElement);
	      window.URL.revokeObjectURL(href);
	    }
      })
      .catch(error => {
        console.error('下载失败', error);
      });
    }

在 Internet Explorer 中，msSaveOrOpenBlob 函数用于保存或打开文件。如果该函数可用，说明浏览器是 Internet Explorer，你可以使用此函数来相应地处理 Blob。

请注意，这仅适用于 Internet Explorer，并且现代浏览器（如 Chrome、Firefox、Edge、Safari）使用不同的方法，因为这个函数在这些浏览器中不受支持。如果需要，确保为其他浏览器提供替代方法。

需要注意的是，通常下载的逻辑都是统一的，如果一个系统中有多处涉及到下载，那么下载的处理逻辑可以放在响应拦截器中，通过后台返回的content-type进行判断是否是下载请求，常见的有：'application/x-msdownload', 'application/force-download', 'application/octet-stream',