Vue中实现文件下载

以下我们模拟进行页面按钮点击下载文件：

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

<script>
export default {
  methods: {
    async downloadFile() {
      try {
        // 发送 GET 请求到后端 API 下载文件
        const response = await this.$axios.get('这里是你的后台接口', {
          responseType: 'blob' // 将响应类型设置为 'blob' 以处理二进制数据
        });
        // 从响应数据创建一个 Blob 对象
        const blob = new Blob([response.data], { type: 'application/octet-stream' });
        // 创建 Blob 的 URL
        const url = window.URL.createObjectURL(blob);
        // 创建一个链接元素以触发下载
        const link = document.createElement('a');
        link.href = url;
        link.download = 'customFileName.pdf'; // 设置自定义文件名
        link.click(); // 触发下载
        window.URL.revokeObjectURL(url); // 下载完成后清理 URL 对象
      } catch (error) {
        console.error('下载文件时出错', error);
      }
    },
  }
};
</script>

以上为一个简单的后端流文件的下载示例，仅供参考。