vue项目，通过axios请求下载pdf文件

最新推荐文章于 2025-01-28 09:39:38 发布
最新推荐文章于 2025-01-28 09:39:38 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue 前端 文章标签： html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yupyuping/article/details/120175981
版权
此篇博客介绍了如何使用Axios发送POST请求到 '/jishi/jishi.daochu'，通过设置 responseType 为 'blob' 获取PDF响应，然后创建Blob对象并转化为可下载链接，最后触发下载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 axios({
          method: "post",//请求方式
          url: '/jishi/jishi.daochu',
          responseType: 'blob',
          data: data //需要传的字段
        }).then((res) => {
          let blob = new Blob([res.data], {
            type: `application/pdf` //word文档为msword,pdf文档为pdf
          });
          let objectUrl = URL.createObjectURL(blob);
          let link = document.createElement("a");
          let fname = `信息表pdf`; //下载文件的名字
          link.href = objectUrl;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
        })

Vue Axios下载文件（post/get方式下载文件）
轻风细雨_林木木
03-18 618
下载参数参考：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL 实现流程：https://www.jianshu.com/p/a81c68c15fbd
vue + axios实现文件下载
pin-csdn的博客
07-14 3417
1、导出excel数据 button定义 <div style="text-align:left"> <el-button type="primary" v-on:click="exportExcelData()">数据导出</el-button> </div> 下载的methods中的方法： 有2种方式： exportExcelData(){ // 导出excel数据表 /** 第一种方法 */
vue项目：axios 请求类型为blob类型的接口sucess封装 & err封装
m0_62209297的博客
07-25 2426
在现代Web应用中，处理二进制数据（如文件、图片、视频等）是前端开发常见的需求。本文探讨了如何在Vue项目中使用Axios处理Blob类型的数据，包括文件的下载与上传。对于文件下载，我们详细介绍了如何设置Axios请求的响应类型为Blob，并通过创建Blob对象和动态生成下载链接，实现文件的下载功能。本文还包括了成功与错误处理的封装方法，以提高代码的可维护性和复用性。通过这些示例和封装方法，开发者可以更高效地处理前端与后端的，
记录-关于axios“GET”请求获取到pdf文件流下载的问题
weixin_41611635的博客
11-29 1088
不是使用axios的原因，也不是responseType未设置的原因，仅仅是因为我把请求参数和responseType分成俩对象导致被忽略了…具体get请求传参的可以去看官网，这里记录下因为传参导致我下载文件出的错误。对比代码放在下面，希望和我碰到同样问题的同学能少踩坑。
Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案_blob pdf
2501_90366368的博客
01-28 485
打开或者预览全是乱码。解决办法：1. 后端接口返回的blob文件流，你下载下来的文件是乱码的？解决办法 ：让你的后端设置流的编码为utf-8。请跟后端大佬说，一定要给blob格式的文件流。2. 后端返回的blob文件流，并且已经设置了utf-8,但是你接受的接口返回值，依然是乱码？解决办法： 肯定没有设置 responseType: “arraybuffer”。
14、vue中的axios全局安装.pdf
10-10
再Vue中应用Axios请求线上数据接口，如何在Vue中配置axios,以上就是配置Axios得详细简介
vue 中使用 axios 下载pdf
orangleliu 笔记本
03-26 6665
axios 是个轻量级的 http 客户端，vue项目中使用非常普遍，现在需要对接一个 pdf 报表接口，发现 axios 无法直接直接下载下来，也就是说用 axios 请求，返回的结果是二进制文件，但是浏览器没有直接下载下来，下面是解决的方案的代码片段。当然也适用于其他二进制文件下载。 代码 let url = 'http://localhost:5000/static/exam...
axios下载pdf
陈灬大灬海
12-07 1890
一般情况下，网页上下载资源，都是通过<a href="https://aaa.com/download?a=b">选组</a>连接跳转之后，会自动下载，说白了就是get请求 这种是最简单的，但是有时候满足不了要求，比如添加header参数等。 postman是个好东西，可以通过点击Send and Download来实现。如果只是进行send操作，那返回的就是流数......
axios通过pdf下载地址预览pdf
qq_36637705的博客
05-04 1521
前言 最近做一个功能，根据一个pdf的下载地址，做出既能下载又能预览pdf的两个功能按钮，因为地址本身在浏览器中打开就能下载，直接记录怎么实现预览功能。 具体步骤 1.前台html代码 <iframe id="iframe" frameborder="0" style="width: 100%; height: 100%"></iframe> 2.前台js代码 axios({ method: 'get', url:'/preview', params:{
前端axios请求二进制数据流转换生成PDF文件空白问题（终极解决方案）
Tz
09-02 5120
本文章共1570字，预计阅读时间1 - 3分钟。 问题场景： axios请求二进制数据转换生成PDF空白问题，使用axios请求后端接口，后端返回的二进制流文件，需要转换成PDF，但是在postman中直接保存文件是可以打开的； 问题描述： 请求后端接口 => 转换PDF文件 代码： import axios from '@public/axios' // 引入封装的axios // 请求方法如下 reqExcel: reqData => axios.get(`api/expo.
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
总之，通过设置axios的`responseType`为`blob`，配合FileReader API，我们可以成功地处理服务器返回的二进制流并实现文件下载。同时，需要注意浏览器的跨域策略对HTTP响应头的影响，确保后端正确设置`Access-Control...
axios post提交formdata的实例
08-27
下面小编就为大家分享一篇axios post提交formdata的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue axios数据请求get、post方法及实例详解
10-18
axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。这篇文章主要介绍了vue axios数据请求get、post方法的使用 ,需要的朋友可以参考下
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
01-19
vue-cli+axios实现附件上传下载记录： 上传： 这里用formData格式传递参数；请求成功后后台返回上传文件的对应信息。 重点是下载： ############## downloadfile(res) { var blob = new Blob([res.data], {...
前端axios下载文件（word、pdf等）
NJR10byh的博客
02-13 1900
前端使用axios调后端接口来处理文件（word、pdf等） 考虑到项目后期维护，自己封装了axios方法，方便项目后期更换服务器 api.js import axios from 'axios' axios.defaults.withCredentials = true // axios.defaults.headers.common['Authorization'] = localStorage.getItem('token') export default async ( url, data
vue 通过axios下载后端接口文件流pdf文件
qq_42417923的博客
10-31 8104
关于下载在页面直接写url地址也是可以下载的， window.location.href=“text.pdf”; 但后端接口有的时候要求传给我们前端的是文件流格式，前端处理方式如下               that.$http({                       method:"get",                       url:api.exportContrac...
vue 根据接口返回的url预览pdf和下载pdf文件
qq_44782585的博客
06-07 7763
接下来我们创建一个URL对象，以便在浏览器中访问该PDF文件，然后创建一个a标签并设置其href属性为该URL对象的值。pdf的URL直接打开的话是网页预览界面，而不是文件下载，文件下载需要的是二进制数据，但是如果接口返回的是在线链接，那么可以通过以下操作进行格式转化再去下载。创建一个方法downloadPDF()，接收一个在线URL地址，然后使用axios发送GET请求获取PDF文件的二进制数据。这将会在点击该按钮时调用downloadPDF()方法并下载名为file.pdf的PDF文件。
vue axios下载pdf文件空白的问题
Hantham的博客
06-01 1125
也不好使，使用原生axios也不好使，这时发现mock会自动将responseType设置为空。将import './mock’注释掉即可。下载pdf时，发现设置。
vue使用axios下载文件
wutiantesi的博客
03-08 6169
不哔哔，直接上代码 <el-button @click="exportExcel()">导出</el-button> <script> methods: { exportExcel(){ var params={ XX:xx//额外需要携带的请求体 } this.$axios.get('/API/exportExcel',{
vue下载文件axios怎么写
最新发布
03-22
### 如何使用 Vue 和 Axios 实现文件下载功能 在前端开发中，实现文件下载通常涉及发送 HTTP 请求并处理响应中的二进制数据流。以下是基于 Vue 和 Axios 的文件下载解决方案。 #### 1. 安装 Axios 首先需要确保项目中有 Axios 库的支持。可以通过 NPM 或 Yarn 来安装 Axios[^5]： ```bash npm install axios --save ``` 或者， ```bash yarn add axios ``` #### 2. 配置 Axios 实例（可选） 为了更好地管理请求参数和拦截器等功能，建议创建一个独立的 Axios 实例[^3]。可以在 `src/plugins/axios.js` 文件中完成配置： ```javascript // src/plugins/axios.js import axios from 'axios'; const instance = axios.create({ baseURL: 'https://example.com/api', // 替换为目标服务器地址 timeout: 10000, responseType: 'blob' // 设置响应类型为 blob，用于接收文件数据 }); export default instance; ``` 此设置中的 `responseType: 'blob'` 是关键部分，它告诉浏览器将返回的数据作为二进制大对象 (Blob) 处理而不是默认 JSON 格式[^4]。 #### 3. 组件内的方法实现 接下来是在 Vue 组件内部编写逻辑以触发文件下载操作。下面是一个完整的例子展示如何发起 GET 请求获取远程资源并将之保存到本地磁盘上[^1]: ```javascript <template> <button @click="downloadFile">点击下载</button> </template> <script> import axiosInstance from '@/plugins/axios'; export default { name: "DownloadComponent", methods: { downloadFile() { const url = '/api/download/sample.pdf'; // 假设这是你要访问的服务端接口路径 axiosInstance.get(url, { headers: {'Authorization': 'Bearer token'} // 如果有身份验证需求的话加入相应头信息 }) .then((response) => { let fileName = ''; // 获取文件名的方式取决于服务端返回的内容 if(response.headers['content-disposition']){ var temp = response.headers['content-disposition'].split("filename="); fileName = decodeURI(temp[temp.length - 1]); } const link = document.createElement('a'); link.href = URL.createObjectURL(new Blob([response.data])); link.setAttribute('download', fileName || 'unknown-file'); // 默认名称未知情况下给定替代方案 document.body.appendChild(link); link.click(); link.remove(); }).catch(err=>{ alert(`发生错误:${err.message}`); }); } }, }; </script> ``` 上述代码片段展示了几个重要概念： - **headers**: 可能会根据实际情况调整比如添加认证令牌等额外字段； - **responseType='blob'**: 已经提前设定好以便于解析非JSON类型的回复体； - 动态生成 `<a>` 元素并通过 JavaScript 手动模拟用户行为从而启动实际意义上的“下载”。 #### 4. 后台支持跨域资源共享(CORS) 当涉及到前后分离架构下的 API 调用时，不可避免要面对 CORS(跨源资源共享)问题。如果目标主机不允许来自当前页面域名发出的请求，则需修改服务器端策略允许特定来源访问指定资源。对于某些场景还可以考虑利用反向代理机制规避此类限制条件。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值