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

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

相关推荐
Wiktok2 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~6 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号8 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌37 分钟前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏2 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹3 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6