开发避坑指南(70)：Vue3 Http请求头携带token下载pdf文件解决方案

原创于 2025-11-21 16:07:45 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

避坑指南专栏收录该内容

71 篇文章

订阅专栏

问题

Vue3中http请求如何下载预览pdf文件？请求头中如何携带token？

解决办法

使用axios下载PDF文件，通过Blob对象处理二进制数据流实现。请求头中携带token则通过在axios请求中添加headers实现。代码如下：

1、main.js中全局引入axios或则vue组件中单独引入axios

import axios from 'axios'

2、使用axios发送下载请求

axios({
  method: 'get', // 使用GET请求方法
  responseType: 'blob', // 指定响应数据类型为二进制大对象(Blob)，用于处理文件流
  url: url, // 请求的PDF文件URL地址
  headers: {
    'X-Auth-token': token // 在请求头中添加认证token，用于身份验证
  }
}).then(res => {
  // 将接收到的二进制数据创建为Blob对象，使用响应头中的content-type指定文件类型
  const blob = new Blob([res.data], { type: res.headers["content-type"] });
  
  // 浏览器兼容性处理：优先使用标准URL接口，回退到webkitURL（兼容旧版浏览器）
  var URL = window.URL || window.webkitURL;
  
  // 为Blob对象创建临时URL链接，可用于文件访问
  let href = URL.createObjectURL(blob);
  
  // 在新窗口或标签页中打开PDF文件进行预览
  window.open(href)
});