js 将文件 url 地址转成 Blob 文件流并下载

  1. 安装 axios(如果还没有安装):

    javascript 复制代码
    npm install axios
  2. 创建一个方法来处理文件下载

    在你的 Vue 组件中,可以创建一个方法来处理文件下载。假设你有一个 API 接口返回文件流,你可以使用 axios 来发送请求并处理响应。

javascript 复制代码
<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFile() {
      try {
        // 假设你的接口是 /api/get-file
        const response = await axios.get('/api/get-file', {
          responseType: 'blob' // 确保响应类型为blob
        });

        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf'); // 设置下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('Error downloading file:', error);
      }
    }
  }
};
</script>
  • axios.get('/api/get-file', { responseType: 'blob' }):发送一个GET请求到你的 API 接口,并将响应类型设置为 blob,以便接收二进制数据。
  • window.URL.createObjectURL(new Blob([response.data])):将响应数据转换为一个 Blob 对象,并生成一个临时的URL。
  • 创建一个隐藏的 <a> 标签,并将其 href 属性设置为生成的临时URL,同时设置 download 属性以指定下载的文件名。
  • 将这个 <a> 标签添加到文档中,然后模拟点击事件以触发下载。
  • 最后,移除这个临时创建的 <a> 标签。

这样,当用户点击按钮时,浏览器会开始下载指定的文件。

相关推荐
咖啡の猫29 分钟前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲3 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5813 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路4 小时前
GeoTools 读取影像元数据
前端
ssshooter4 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友4 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry5 小时前
Jetpack Compose 中的状态
前端
dae bal6 小时前
关于RSA和AES加密
前端·vue.js
柳杉6 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog6 小时前
低端设备加载webp ANR
前端·算法