目录

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

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
葡萄城技术团队14 分钟前
基于前端技术的QR码API开发实战:从原理到部署
前端
八了个戒2 小时前
「数据可视化 D3系列」入门第三章:深入理解 Update-Enter-Exit 模式
开发语言·前端·javascript·数据可视化
noravinsc2 小时前
html页面打开后中文乱码
前端·html
胚芽鞘6813 小时前
vue + element-plus自定义表单验证(修改密码业务)
javascript·vue.js·elementui
小满zs3 小时前
React-router v7 第四章(路由传参)
前端·react.js
小陈同学呦3 小时前
聊聊双列瀑布流
前端·javascript·面试
键指江湖3 小时前
React 在组件间共享状态
前端·javascript·react.js
烛阴4 小时前
零基础必看!Express 项目 .env 配置,开发、测试、生产环境轻松搞定!
javascript·后端·express
诸葛亮的芭蕉扇4 小时前
D3路网图技术文档
前端·javascript·vue.js·microsoft
小离a_a4 小时前
小程序css实现容器内 数据滚动 无缝衔接 点击暂停
前端·css·小程序