脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue下载不同文件

Vue中下载不同文件五种常用的方式

 更新时间：2023年09月20日 08:35:17   作者：前端程序猿i  
自己最近做项目的时候遇到需要下载文件的需求,索性这里给总结下,这篇文章主要给大家介绍了关于Vue中下载不同文件五种常用的方式,需要的朋友可以参考下

当在Vue中需要实现文件下载功能时，我们可以有多种方式来完成。下面将介绍五种常用的方法。

1. 使用window.open方法下载文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      window.open(fileUrl);
    }
  }
};
</script>

在上面的示例中，我们使用了window.open方法来打开一个新窗口，并直接访问文件的URL地址，从而触发文件下载。

2. 使用<a>标签进行文件下载

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      const link = document.createElement('a');
      link.href = fileUrl;
      link.setAttribute('download', fileName);
      link.click();
    }
  }
};
</script>

在上面的示例中，我们首先创建一个<a>标签，然后设置其href属性为文件的URL地址，download属性为要下载的文件名。最后，通过调用click()方法触发链接的点击事件，实现文件的下载。

3. 使用axios下载文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      axios.get(fileUrl, { responseType: 'blob' })
        .then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在上面的示例中，我们使用了axios发送GET请求，设置responseType为blob以便获取文件的二进制数据。然后，通过创建临时URL、创建<a>标签并设置下载属性，实现文件的下载。

4. 使用Fetch API下载文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      fetch(fileUrl)
        .then(response => response.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在上面的示例中，我们使用了Fetch API发送GET请求，并使用.blob()方法将返回的数据转换为blob对象。然后，通过创建临时URL、创建<a>标签并设置下载属性，实现文件的下载。

5. 使用Vue的$download方法下载文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      this.$download(fileUrl, fileName);
    }
  }
};
</script>

在这个示例中，我们直接调用Vue实例的$download方法，并传入文件的URL地址和下载的文件名，即可实现文件的下载。

6. 使用创建a标签方法下载文件

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const folderPath = '/path/to/folder/'; // 文件所在的文件夹路径
      const fileUrl = folderPath + fileName; // 拼接文件夹路径和文件名
      const link = document.createElement('a');
      link.href = fileUrl;
      link.setAttribute('download', fileName);
      link.click();
    }
  }
};
</script>

在这个示例中，我们首先定义了文件所在的文件夹路径folderPath，然后通过拼接文件夹路径和文件名来构建完整的文件URL地址fileUrl。接着，我们创建一个<a>标签，并设置其href属性为文件URL，download属性为要下载的文件名。最后，通过调用click()方法触发链接的点击事件，实现文件的下载。

以上是六种常用的在Vue中实现文件下载的方式，请根据项目需求选择合适的方式来完成文件下载功能。

总结

到此这篇关于Vue中下载不同文件五种常用方式的文章就介绍到这了,更多相关Vue下载不同文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 深入理解Vue-cli4路由配置

    深入理解Vue-cli4路由配置

    Vue-router是Vue官方的路由插件，本文将结合实例代码，介绍Vue-cli4路由配置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue显示图片的几种方式小结

    Vue显示图片的几种方式小结

    本文主要介绍了Vue显示图片的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Vue使用antd中input组件去验证输入框输入内容(rules 案例)

    Vue使用antd中input组件去验证输入框输入内容(rules 案例)

    这篇文章主要介绍了Vue使用antd中input组件去验证输入框输入内容-rules-案例,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • Vuex 进阶之模块化组织详解

    Vuex 进阶之模块化组织详解

    这篇文章主要介绍了Vuex 进阶之模块化组织详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue中addEventListener() 监听事件案例讲解

    Vue中addEventListener() 监听事件案例讲解

    这篇文章主要介绍了Vue中addEventListener() 监听事件案例讲解，包括语法讲解和事件冒泡或事件捕获的相关知识，本文结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-12-12
  • Nuxt.js实战详解

    Nuxt.js实战详解

    这篇文章主要介绍了Nuxt.js实战详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue源码中要const _toStr = Object.prototype.toString的原因分析

    Vue源码中要const _toStr = Object.prototype.toString的原因分析

    这篇文章主要介绍了Vue源码中要const _toStr = Object.prototype.toString的原因分析,在文中给大家提到了Object.prototype.toString方法的原理,需要的朋友可以参考下
    2018-12-12
  • 使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)

    使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)

    这篇文章主要给大家介绍了关于使用vscode格式化文档无效的解决办法,也就是vue代码格式化文档无效,这是最近突然遇到的一个问题,这里给大家介绍一下解决的办法,需要的朋友可以参考下
    2023-08-08
  • AntV F2和vue-cli构建移动端可视化视图过程详解

    AntV F2和vue-cli构建移动端可视化视图过程详解

    这篇文章主要介绍了AntV F2和vue-cli构建移动端可视化视图过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 从vue-router看前端路由的两种实现

    从vue-router看前端路由的两种实现

    本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由，介绍了相关原理，并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。
    2021-05-05

最新评论