前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案)
本文章共1570字,预计阅读时间1 - 3分钟。
问题场景:
axios请求二进制数据转换生成PDF空白问题,使用axios请求后端接口,后端返回的二进制流文件,需要转换成PDF,但是在postman中直接保存文件是可以打开的;
问题描述:
请求后端接口 => 转换PDF文件 代码:
import axios from '@public/axios' // 引入封装的axios
// 请求方法如下
reqExcel: reqData =>
axios.get(`api/export`, reqData, { responseType: 'arraybuffer' }).then(res => res)
// 转换pdf
const blob = new Blob([res.data], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
window.open(url)
弹出出窗口打开转换之后的PDF文件为空白状态 !
原因分析:
问题分析1:responseType类型
一般二进制参数有两种:
- "arraybuffer" => response 是一个包含二进制数据的 JavaScript ArrayBuffer。
- "blob" => response 是一个包含二进制数据的 Blob 对象。
这里要根据后端返回的数据类型,更换参数!
问题分析2: axios封装问题
更换了各种responseType的类型,使用了各种PDF生产方法,打开的一直是空白状态,网上找了各种教程,一直没有好的解决方法。
这时候我怀疑起了axios的问题,如上代码,在使用axios之前,我们对其进行了各种错误的拦截、请求头加入token、判断错误码等等一系列的操作,然后引入axios。
没错,答案就在这里,如果你究极一切方法都没有解决PDF空白问题,那么一定是你axios封装的一些问题,这时候你直接 import axios from 'axios'
// 引入原生的axios,不作封装处理 ,
问题迎刃而解!
解决方案:
使用原生的axios,不做封装处理,更改responseType类型为 blob
import axios from 'axios' // 引入原生的axios,不作封装处理
await axios({
method: 'GET',
headers: { token },
url: `api/export`,
params: { discountPrint },
responseType: 'blob' // 更改responseType类型为 blob
}).then(res => {
data = res
}).catch(err => {
console.log(err)
})
// 转换pdf
const blob = new Blob([res.data], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
window.open(url)
至此,弹出出窗口打开的PDF文件为正常状态 问题解决!
结尾
好了,以上就是本篇全部文章内容啦。
如果遇到问题或者有其他意见可以在下方评论区贴出!
码字不易。如果觉得本篇文章对你有帮助的话,希望你可以留言点赞支持一下,非常感谢~
只要有树叶飞舞的地方,火就会燃烧,火的影子照耀着村子,新的树叶就会发芽。
前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案)的更多相关文章
- 前端生成pdf文件之pdfmake.js
转载:点击查看原文 pdfmake.js是一个简单的生成pdf文件的插件. pdfmake.js https://files.cnblogs.com/files/s313139232/pdfm ...
- Itext生成pdf文件
来源:https://my.oschina.net/lujianing/blog/894365 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...
- wkhtmltopdf+itext实现html生成pdf文件的打印下载(适用于linux及windows)
目中遇到个根据html转Java的功能,在java中我们itext可以快速的实现pdf打印下载的功能,在itext中我们一般有以下三中方式实现 配置pdf模板,通过Adobe Acrobat 来设置域 ...
- [轉載]史上最强php生成pdf文件,html转pdf文件方法
之前有个客户需要把一些html页面生成pdf文件,然后我就找一些用php把html页面围成pdf文件的类.方法是可谓是找了很多很多,什么html2pdf,pdflib,FPDF这些都试过了,但是都没有 ...
- 怎么用PHP在HTML中生成PDF文件
原文:Generate PDF from html using PHP 译文:使用PHP在html中生成PDF 译者:dwqs 利用PHP编码生成PDF文件是一个非常耗时的工作.在早期,开发者使用PH ...
- 史上最强php生成pdf文件,html转pdf文件方法
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- java调用wkhtmltopdf生成pdf文件,美观,省事
最近项目需要导出企业风险报告,文件格式为pdf,于是搜了一大批文章都是什么Jasper Report,iText ,flying sauser ,都尝试了一遍,感觉不是我想要的效果, 需要自己调整好多 ...
- OpenOffice将MS docx转换成pdf文件偶数页眉不显示问题解决办法
OpenOffice版本:4.0(Windows.Linux下测试都出现问题) MS Office版本:2007 问题描述 使用OpenOffice将MS的docx文件转换为pdf文件时,docx文件 ...
- 使用abcpdf将html转换成pdf文件
ABCpdf.NET使用介绍 最新做一个项目需要生成pdf文档以供打印,研究决定使用abcpdf这款组件,先针对其使用方法做一个简单的总结介绍以给有需要的朋友做参考. 一. ABCpdf.NET简单介 ...
随机推荐
- 【知识详解】Https详解
Https详解 1.什么是Https Http + SSL = Https 一句话说:Https是身披SSL的Http,当使用了SSL后,Http先和SSL通信,再由SSL和TCP通信, 2.为什么需 ...
- [考试总结]noip模拟13
因为最近考试频繁,所以咕掉了好长时间... 淦,刚说完又来一场... 先咕了,等以后有时间再写.... 回来了... 首先看到这个题目们,感觉就不存好意... 然后开始开 \(T1\). 只能蒻蒻地按 ...
- odoo时间过滤
Odoo中本日.本月.上月过滤器实现方法 Odoo中本日.本月.上月过滤器实现方法<filter string="今日订单" name="today" ...
- Skywalking-04:扩展Metric监控信息
扩展 Metric 监控信息 官方文档 Source and Scope extension for new metrics 案例:JVM Thread 增加 Metrics 修改 Thread 的定 ...
- Python - dict 字典常见方法
字典详解 https://www.cnblogs.com/poloyy/p/15083781.html get(key) 作用 指定键,获取对应值 两种传参 dict.get(key):键存在则返回对 ...
- vue源码阅读笔记
1.yarn test [文件名] -t [name-of-spec(describe or test )] 直接运行yarn test,会测试所有测试文件:yarn test 后面只跟文件名的话会 ...
- Java面向对象13——抽象类
抽象类 package oop.demon01.demon08; //abstract 抽象类: 类 extends: 类---单继承 (接口可以多继承) public abstract c ...
- Java流程控制03——选择结构
选择结构 if单语句结构 我们很多时候要去判断一个东西是否可行,然后我们才去执行,这样一个过程我们用if语句来表示 语法 if(布尔表达式){ //如果布尔表达式结果为true将执行的语句 } if ...
- 5年Android开发诉苦:47天21家面试,半年空档期觉得整个人生都被毁了
近日,我在逛某社交论坛时,发现一位做了五年的Android开发将自己这段时间的所有面试经历发表了出来,根据网友自己提供的信息显示,主要面试的地点都在北京,上海等地. 微软和亚马逊刚面试完一面,都是以算 ...
- Linux命令(六)之防火墙iptables的相关操作以及端口的开放
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...