前端下载文件流PDF文件显示空白 或 无法打开

最新推荐文章于 2025-05-06 09:34:35 发布
最新推荐文章于 2025-05-06 09:34:35 发布
阅读量5.6k 收藏 6
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mao0523/article/details/122475499
版权
本文解决了一个常见问题：从后端获取PDF文件流后，前端尝试下载但显示为空白且无法打开的情况。通过设置请求的 responseType 属性为 'blob' 来解决此问题。

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

后端返回PDF文件流，前端下载后空白，提示无法打开:不支持打开改文件类型或文件已损坏。

 解决方法：

需要在发起请求时加入responseType:'blob'

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为空
m0_52611940的博客
06-29 1677
前端解析后台返回得文件流导出得 pdf为空
下载后端传回二进制流pdf后前端显示空白pdf
shihezhengshz的博客
10-14 1686
场景：我调用第三方接口，返回一个下载文件 花了还是有一段时间，只要是从意识到axios接收参数需要变成接收文件，到接收文件的格式还有讲究，哇！ 好了，说正事： 1.首先，后端返回一个可下载二进制流， 那么前端axios接收格式就得变，如下两种，怎么使用看axios去喽~诶嘿~ responseType: 'arraybuffer' responseType: 'blob' 2.上面两种格式说实话我也没去看他们区别，第一个arraybuffer是我们后端导出文件时候用的，第二个blob就.
下载PDF文件成功，但是无法完成打开
David_silverwolf的博客
01-30 661
下载PDF文件成功，但是无法完成打开，抓包response有文件下载的链接地址。
前端下载二进制流pdf文件，下载成功，打开空白问题解决
yemuxia_sinian的博客
10-20 1万+
做pdf文件下载的时候，后端返回了二进制数据流，前端在发起请求时需要设置responseType: arraybuffer 或者blob类型才可以，具体操作可以看我之前的文章（传送门）。一开对接的时候下载打开都是正常的，过后突然就不行了，能下载成功，页数也是正常的，但是打开页面却都是空白的。 搜索百度了一番，都是说设置好response Type就可以了，偶然发现有人评论说不能用axios请求要用原生的Ajax请求才可以，试了一下果然成功了。 具体代码： downloadFn() { l
前端导出下载文件后提示无法打开文件
jiangjunyuan168的博客
02-24 2144
对返回的响应数据进行打印，发现响应数据为字符串格式，前期规划的后端返回数据应该 blob 对象的。后经排查后发现是...
前端文件流下载后文件空白
qq_41547756的博客
07-06 946
前端文件流下载空白
iframe打开base64格式的PDF显示空白
weixin_45336090的博客
11-02 5473
使用iframe打开Base64格式的PDF文件显示空白，src的数据也加载出来了，但就是不显示 转换一下思路，如果Base64格式不行的话，把Base64转换成Blob对象，创建一个URL的Blob对象，再将URL赋值给src属性同样可以实现预览 previewPdf(fileBase64){ let fileBlob = this.base64ToBlob(fileBase64,'application/pdf'); let href = window.URL.createObjectURL(f
解决pdf文件流，预览全是空白页
weixin_46096128的博客
09-29 527
带前后端代码示例。
记录前端JS获取PDF文件流，将blob对象转换成下载链接打开后一篇空白的问题
庹小智的博客
06-06 8351
blob数据转为下载链接，获取PDF文件流，将blob对象转换成下载链接打开后一篇空白的问题
前端实现PDf文件下载功能
夏沫之初的博客
02-27 2226
前端实现生成PDF并下载的功能
SpringBoot在线预览PDF文件
04-25
接着，我们要引入PDF.js，这是一个由Mozilla开发的JavaScript库，专门用于在浏览器环境中显示PDF文件。PDF.js支持将PDF解析为一系列的二进制数据流，并将其转化为可以在HTML5 Canvas上渲染的图像。在SpringBoot应用...
谷歌浏览器无法自动打开PDF文件？教你一步解决！
最新发布
mmoo_python的博客
05-06 421
✅ 浏览器原生设置调整✅ 操作系统文件关联修复✅ 扩展程序冲突排查✅ 命令行深度修复✅ 预防性维护策略通过分层次的问题定位，即使是非技术背景用户也能逐步排除故障。建议技术人员将本文方案整理为标准化处理流程，可提升70%以上的同类问题解决效率。保持浏览器和操作系统的定期维护，是预防此类问题的最佳实践。
java下载pdf_java – 下载时空白PDF
weixin_39901685的博客
02-21 1929
我面临一个非常奇怪的问题,我试图使用下面的代码从我的struts应用程序发送PDF文件作为附件,JasperReport jrReport = (JasperReport) JRLoader.loadObject(jasperReport);JasperPrint jasperPrint = JasperFillManager.fillReport(jrReport, parameters, da...
使用ITextRenderer导出PDF后无法打开问题，提示‘无法打开此文件‘
weixin_52911459的博客
08-13 459
使用ITextRenderer导出PDF后无法打开问题，提示'无法打开此文件'
java 下载文件内容为空_使用javascript下载时,PDF为空白
weixin_33480380的博客
02-16 1334
我有一个Web服务,它在响应中返回PDF文件内容.我想在用户点击链接时将其下载为pdf文件.我在UI中编写的javascript代码如下：$http.get('http://MyPdfFileAPIstreamURl').then(function(response){var blob=new File([response],'myBill.pdf',{type: "text/pdf"});var...
golang后端数据返回到前端结果为空
qq_42110844的博客
04-24 1601
golang小实习生，第一次做分配的接口开发任务，首先定义结构体如下： type TagInfo struct { Tag string `form:"tag" json:"tag"` TagName string `form:"tag_name" json:"tag_name"` } type TagInfos struct { tags []*TagInfo `form:"tags" json:"tags"` } 该接口将TagInfos作为“data”字段的值返回，但测试的时候返回结果一
后端返回文件流时，前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式
DongShanYuXiao的博客
05-13 9728
上图类似于乱码，就是文件流在浏览器中的表现形式。
文件流下载文件后提示不支持打开该类型文件或文件已损坏
热门推荐
wangzhe123_的博客
06-22 1万+
在react项目中用到下载，请求后端接口返回文件流，前端来处理文件流生成文件后下载。 要设置responseType！！ 采用的方法就是百度上随便一搜就可以搜到的Blob方法，最开始要下载的文件格式为.pdf，但是下载完的文件用office和WPS都打不开，先说怎么解决的这个问题，之前在百度的时候也看到有人说设置responseType就可以了，但是不信邪，就不设置，结果还真的是因为responseType，设置之后下载完的文件就都可以打开啦！ 解决思路： 1、先让后端把文件流传的文件变成一个空白文档，首先
pdfjs打开文件流空白
03-12
### 解析 PDF.js 打开文件流显示空白的原因 当遇到使用 PDF.js 加载文件流却显示为空白的情况时，通常是因为数据传输过程中存在问题或者前端渲染逻辑有误。具体来说： - 数据请求配置不当可能导致返回的数据无法被正确解析为 PDF 文件[^2]。 - 如果服务器响应头设置不恰当，可能会导致客户端接收到错误的内容类型或编码方式。 ### 实现可靠的 PDF 流加载策略 为了确保通过 PDF.js 正确展示来自服务器的 PDF 文件流，建议采用以下措施来优化数据获取过程并调整前端处理逻辑： #### 使用 Axios 获取二进制数据 对于 HTTP 请求部分，推荐利用 `axios` 发起 GET 请求，并指定 `responseType` 参数为 `'blob'` 来接收原始字节形式的数据。这一步骤至关重要，因为只有这样才能保证所获得的是未经修改的真实 PDF 内容而不是默认情况下可能经过 UTF8 编码后的字符串表示。 ```javascript import axios from 'axios'; const fetchPdfBlob = async (url, token) => { try { const response = await axios({ method: 'GET', url, headers: {'Authorization': token}, responseType: 'blob' }); return response.data; } catch (error) { throw error; } }; ``` #### 创建对象 URL 并初始化 PDF.js 查看器 一旦成功取得 Blob 对象，则可以创建一个新的临时访问路径供 PDF.js 使用。这里的关键在于调用 `window.URL.createObjectURL()` 方法生成指向该资源的有效链接地址。之后便可以直接把这个 URL 提供给 PDF.js 的 API 进行文档呈现。 ```javascript // 假设已有一个 DOM 节点用于容纳 PDF 查看组件 const containerElement = document.getElementById('pdf-viewer'); fetchPdfBlob('/path/to/your/api', 'your-auth-token') .then((blobData) => { // 将 Blob 数据转化为可读取的对象 URL let objectUrl = window.URL.createObjectURL(blobData); // 初始化 PDF.js 查看实例... var options = { workerSrc : '//mozilla.github.io/pdf.js/build/pdf.worker.min.js' }; pdfjsLib.getDocument(objectUrl).promise.then(function(pdfDocument){ // 渲染第一页到容器中... renderPage(pdfDocument, 1); function renderPage(pdfDoc, pageNumber){ pdfDoc.getPage(pageNumber).then(function(page){ var scale = 1.5; var viewport = page.getViewport({scale}); var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); containerElement.appendChild(canvas); }) } }); }).catch(console.error); ``` ### 处理潜在兼容性和依赖缺失问题 有时即使上述步骤都执行无误，仍然可能出现某些特定环境下的异常情况。例如，在尝试部署至生产环境中时发现字体或其他静态资源未能按预期加载等问题。此时应特别注意检查是否存在跨域资源共享(CORS)限制以及确认所有必要的辅助库都已经正确引入[^3]。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

啃代码的毛毛虫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值