vue关于下载文件常用的几种方式

Vue 作为一种流行的前端框架，提供了几种下载文件的方式。本篇文章将介绍 Vue 常用的几种前端下载文件的技巧。

1. 通过a标签下载文件

a 标签是 HTML 中常用的下载文件的方式之一。Vue 在处理下载文件时，可以通过创建一个 a 标签，设置其 href 属性和 download 属性来实现文件下载。

<template>
  <div>
    <a href="path/to/file" download>Download File</a>
  </div>
</template>

在这种情况下，文件路径应该是相对于静态文件的。在大多数情况下，我们希望能够动态地下载文件。要实现这一点，我们可以在 Vue 组件的方法中使用 JavaScript 来实现下载功能。

<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const url = 'path/to/file';
      const filename = 'example.pdf';

      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      link.click();
    }
  }
}
</script>

此示例创建了一个包含要下载文件的 URL 和一个文件名的变量。通过创建一个元素并通过链接的点击触发器将其下载。

2. 使用 axios 下载文件

Vue 还提供了 axios 库，它是一种流行的 HTTP 请求库，可以用于与 REST API 进行交互。axios 可以轻松地实现下载文件。

<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  methods: {
    downloadFile() {
      const url = 'path/to/file';
      axios({
        url,
        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', 'example.pdf');
        document.body.appendChild(link);
        link.click();
      });
    }
  }
}
</script>

axios 将响应的数据类型设置为 'blob'，以便能够将其下载。通过创建一个 URL 对象并设置其链接的 href 属性，将 Blob 对象作为参数传递给其构造函数，并在生成的链接上设置 download 属性，可以实现文件下载。

这两种方法都可以在 Vue 组件中实现文件下载功能。具体实现应该取决于您的项目需求，考虑您的目标浏览器是否支持 Web API 中的某些功能。