记录前端JS获取PDF文件流，将blob对象转换成下载链接打开后一篇空白的问题

原创 已于 2022-06-06 17:51:00 修改 · 8.5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #react.js

于 2022-06-06 17:49:24 首次发布
本文记录了在前端使用React.js时遇到的一个问题：点击按钮下载PDF，但文件打开后显示为空白。经过排查，发现是数据格式问题。通过调整Ajax请求参数和设置Blob类型为'application/pdf;charset=utf-8'，成功解决了文件下载后空白的难题。

需求，做一个按钮，点击可以把已审批的订单，以PDF形式导出

写api文件时，注意post、get、还有x-www-form-urlencoded等传参形式，调用不同的封装方法

调用成功，返回下图的Blob对象

 使用URL.createObjectURL将请求的blob数据转为可下载的url地址

做上图的调试，alert出了下载链接

最低0.47元/天 解锁文章
Vue3 - 强力解决前端下载二进制流pdf文件、下载成功后打开空白问题解决，或者获取PDF文件流，将blob对象转换成下载链接打开后一片空白（无论是否使用pdf插件下载，还是原生方法下载都完美解决）
🏆 前端领域优质创作者
09-11 4332
vue3前端下载二进制流pdf文件，下载成功，打开空白问题解决，js下载PDF文件流，打开空白问题，VUE3 h5中的文件流下载和指定的url下载总结（解决下载后的pdf打开空白情况）pdfjs打开文件流空白，解决pdf文件流，预览全是空白页，pdf文件流，下载正常，但是预览全是空白页，前端JS获取PDF文件流，将blob对象转换成下载链接打开后一篇空白的问题，前端文件流下载后文件空白，前端下载文件流PDF文件显示空白 或 无法打开，在线预览PDF文件打不开白屏怎么办，前端axios请求二进制数据流转换生成
uniapp - 解决在线预览PDF文件空白打不开的问题，无论是后端下载二进制文件流pdf还是本地插件或JS预览查看打开白屏不显示，详细排查解决（适用于移动端H5网页、安卓/苹果app、微信小程序）
🏆 前端领域优质创作者
09-11 7563
uniapp App端 实现pdf文件预览打开白屏解决，uniapp 在线预览pdf打开一片空白，跨域白屏，uni-app中使用WebView预览PDF文件打开空白，微信小程序（uniapp）预览PDF空白怎么办，下载PDF文件流后打开空白或无法打开的问题，Uniapp H5网页下载二进制pdf文件页面空白以及解决文件损坏打不开的情况，Uniapp app在线预览pdf文件流，PDF加载出来怎么办，服务器后端返回PDF文件流后前端进行下载但打开后一片白屏，解决pdf文件流，预览全是空白页，pdf文件流，下载
Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案
热门推荐
qq_41512902的博客
07-08 1万+
Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案
Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案_blob pdf
2501_90366368的博客
01-28 1185
打开或者预览全是乱码。解决办法：1. 后端接口返回的blob文件流，你下载下来的文件是乱码的？解决办法 ：让你的后端设置流的编码为utf-8。请跟后端大佬说，一定要给blob格式的文件流。2. 后端返回的blob文件流，并且已经设置了utf-8,但是你接受的接口返回值，依然是乱码？解决办法： 肯定没有设置 responseType: “arraybuffer”。
3分钟上手PDFKit浏览器端开发：从Blob流处理到客户端下载全攻略
最新发布
gitblog_00511的博客
11-08 998
还在纠结后端生成PDF的繁琐流程？想让用户在浏览器中即时获得PDF报告却被Blob流处理劝退？本文将带你3步实现PDFKit浏览器端集成，从环境搭建到文件下载全程可视化操作，即使零基础也能1小时内独立完成。 读完本文你将掌握： - 5分钟搭建PDFKit前端开发环境 - Blob（二进制大对象）流处理核心原理 - 客户端PDF下载功能零依赖实现 - 3个企业级避坑技巧 ## 一、环境准备：极简
前端预览pdf文件流
qq_40896145的博客
11-22 1892
2、创建预览方法（具体使用时将axios的请求路径替换为你的后端下载地址）把后端返回的pdf文件流转为blob路径，利用浏览器直接预览。3、在你所需要的地方调用previewFile方法。后端接口返回pdf文件流，实现新窗口预览pdf。
前端JS获取PDF文件流，将blob对象转换成下载链接打开后一篇空白的问题
smartzhangxiang的博客
09-05 4290
还有new Blob([blob], { type:'application/pdf;注意postForm确认传输form表单格式。
java 下载文件内容为空_使用javascript下载时,PDF为空白
weixin_33480380的博客
02-16 1378
我有一个Web服务,它在响应中返回PDF文件内容.我想在用户点击链接时将其下载为pdf文件.我在UI中编写的javascript代码如下：$http.get('http://MyPdfFileAPIstreamURl').then(function(response){var blob=new File([response],'myBill.pdf',{type: "text/pdf"});var...
uniapp [安卓苹果App端] - 详细实现PDF预览功能在线预览PDF文档，Uniapp App端实现pdf文件预览在线预览pdf二进制文件流、本地pdf文档、PDF文件地址url路径（解决白屏
🏆 前端领域优质创作者
11-10 1万+
uni-app，安卓Android，苹果ios，安卓app端，苹果App端，uniapp苹果安卓app，uniapp在线预览pdf功能，在安卓苹果app平台实现PDF的预览查看，uniappApp端实现pdf文件预览，UNIAPP在线预览PDF文档，Uniappapp在线预览pdf文件流，从后端接口里获取pdf文件如何转成链接预览，预览pdf的插件，uni-app的pdf预览功能，uniapp使用pdf.js插件预览pdf文件，预览pdf白屏没有报错，打开后没反应，打开是空白，加载PDF时发生错误，如
前台导出pdf经验汇总 （html2canvas.js和浏览器自带的打印功能-print.js）以及后台一些导出pdf的方法
Schaffer的博客
11-27 6953
项目导出pdf前台导出pdf的两种方式html2canvas.js & pdf.js简介使用问题及解决方法浏览器自带的打印功能 & print.js简介使用问题及解决方法后台输出pdf利用iText导出 前台导出pdf的两种方式 html2canvas.js & pdf.js 简介 我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。 由于html2
js下载PDF文件流，打开空白问题
weixin_42381896的博客
07-06 1万+
记录一下前端下载后端返回的pdf文件流,显示空白问题。 const blob = new Blob([content.data], { // type是需要对应的文件类型 type: "application/pdf;chartset=UTF-8", // 这里如果是其他格式的文件，把pdf改为所下载的文件格式就可以 }); const fileName = "文件名.pdf"; if ("dow
pdf.js使用文件流预览pdf
09-27
网上大部分pdf.js都是用url方式预览pdf,此处给出pdf.js使用文件流预览pdf的Web工程; 此是maven工程; 100%能运行；
前端下载二进制流pdf文件，下载成功，打开空白问题解决
yemuxia_sinian的博客
10-20 1万+
做pdf文件下载的时候，后端返回了二进制数据流，前端在发起请求时需要设置responseType: arraybuffer 或者blob类型才可以，具体操作可以看我之前的文章（传送门）。一开对接的时候下载打开都是正常的，过后突然就不行了，能下载成功，页数也是正常的，但是打开页面却都是空白的。 搜索百度了一番，都是说设置好response Type就可以了，偶然发现有人评论说不能用axios请求要用原生的Ajax请求才可以，试了一下果然成功了。 具体代码： downloadFn() { l
pdf文件流，下载正常，但是预览全是空白页
wcy0112的博客
04-15 2282
*遇到问题：**后端返回pdf文件流能下载成功，页数也是正常的，打开也是正常的。但是直接在网页上预览，页数正常但页面都是空白的。**解决办法：**需要添加请求类型。这样就能正常预览了。
前后端分离时，下载pdf文件打开显示空白，文件大小正常是怎么回事？
tguomeng的博客
12-07 1348
responseType: ‘blob’ // 更改responseType类型为 blob。1、使用原生的axios，不做封装处理，更改responseType类型为 blob。
uniapp-h5中的文件流下载和指定的url下载总结（解决下载后的pdf打开空白情况）
qq_48850466的博客
04-19 9801
uniapp-h5中的文件流下载和指定的url下载总结（解决下载后的pdf打开空白情况）。
前端 pdf文件流blob预览时pdf空白问题
u011028557的博客
07-10 1301
1. 请求头添加 responseType: 'blob' 或 responseType: 'arraybuffer'；2.使用原生的axios，不做封装处理，更改responseType类型为 blob；如果请求头没用，那就是封装的axios问题；
前端下载二进制pdf文件页面空白以及解决从content-disposition获取文件名中文乱码问题
_NIXIAKF的博客
06-14 6930
前端下载二进制pdf文件页面空白以及解决从content-disposition获取文件名中文乱码问题
前端下载PDF内容空白且大小偏大问题解决
小问号我们是朋友的博客
07-11 2055
前端使用React框架axios请求后端接口下载文件，请求返回正常但文件大小和内容异常。经排查，其原因是使用了mockjs用作数据模拟，导致了请求异常，将其注释掉后，文件大小与内容恢复正常。
将blob对象转换成下载链接打开后一篇空白的问题
12-22
将blob对象转换成下载链接后，用户点击链接打开后可能会遇到一篇空白的问题。这可能是因为blob对象的数据类型或格式与用户的设备或浏览器不兼容所致。解决这个问题可以尝试以下方法： 首先，检查blob对象的数据类型和格式，确保它与用户的设备和浏览器兼容。如果不兼容，可以尝试将blob对象转换成其他常见的数据类型，比如将其转换成文件格式如PDF、图片等，然后再提供下载链接。 其次，确保用户的设备和浏览器支持打开blob对象的数据类型和格式。有时候用户的设备或浏览器版本过低可能会导致无法正常打开blob对象。可以建议用户升级设备或浏览器版本，或者尝试使用其他设备或浏览器打开链接。 另外，还可以尝试使用第三方工具或插件来处理blob对象，比如使用特定的文件处理工具或浏览器插件来打开blob对象的数据类型和格式。 总之，将blob对象转换成下载链接后出现空白的问题可能是因为数据类型或格式不兼容，用户设备或浏览器不支持，可以通过检查和转换数据类型、调整设备或浏览器版本，使用第三方工具等方法来解决。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值