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

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

相关推荐
我在北京coding7 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机31 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人33 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景1 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel