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> 标签。

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

相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript