后端返回文件流PDF文件前端如何实现下载/在线打开

最新推荐文章于 2023-12-20 21:06:14 发布
最新推荐文章于 2023-12-20 21:06:14 发布
阅读量7.8k 收藏 33
点赞数 9
文章标签： 前端 后端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mao0523/article/details/122474843
版权

一般后端返回的文件流PDF文件，前端直接使用window.open是在页面打开，那如何能实现下载呢？

一、PDF文件直接下载

①安装downloadjs

npm install downloadjs

②在需要的地方引入

import download from 'downloadjs'

③在下载的方法里调用download就可以实现下载了

 *如果下载后的PDF文件为空或者提示不支持打开该类型文件或文件已损坏。请检查请求时是否写入以下代码：reponseType:'blob'

二、PDF文件直接页面打开的方法

 

啃代码的毛毛虫
关注
  • 9
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
前端下载文件，预览pdf文件
lhyxm的博客
04-17 239
前端下载文件，预览pdf文件
web前端js显示后台接口pdf二进制流文件
03-28
web前端js显示后台接口pdf二进制流文件，可以直接在idea运行。包含PDFJS 等相关js。详细参考readme
vue 前端下载并预览后端返回的pdf文件流
蓝胖子的博客
12-27 1851
需求：后端返回pdf文件流 前端下载并预览
接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页）
WuqibuHuan的博客
06-16 1万+
后端返回文件流前端将文件流转为成blob地址预览pdf文件
前端解析后台返回的文件流 导出pdf，word格式的文件
ShinyRuo_的博客
12-27 4327
前端导出pdf word格式的html内容
前端处理后台返回的流数据
柒月
10-28 6756
实际工作中，常常会遇到如预览PDF、下载Excel之类的需求。通常处理方式有： 1、后端返回一个文件在服务器的URL，前端直接使用就行。 2、后端返回流数据。如图 前端如何处理？ 1、接口请求的时候一定要加responseType: 'blob',否则生产的文件会是空白（PDF） 2、代码实现 const binaryData = [] binaryData.push(res)// res 后台返回的流数据 this.pdfUrl = window.URL.c
Java后台通过IO流将文件返回至前端进行预览
热门推荐
Lieforlove的博客
05-17 2万+
数据库中有张表专门存文件的信息，字段包括如：文件名，文件类型，文件路径等等。 下面演示怎么把后台的文件信息返回到前端预览。 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.util.FileCopyUtils; import org.springframework.web....
后端接口返回文件流,前端实现docx/pdf/excel等类型文件的导出功能
最新发布
m0_49969710的博客
12-20 2504
后端接口返回文件流,前端实现docx/pdf/excel等类型文件的导出功能
Java实现图片转换PDF文件的示例代码
09-07
在本文中，我们将深入探讨如何使用Java编程语言将图片转换为PDF文件。这个过程涉及到的主要技术包括Spring Boot、Spring MVC以及iTextPDF库。首先，我们需要理解Java项目的依赖管理，以便能够正确导入必要的库。 1....
jsp 文件下载示例代码
10-26
这样，当用户点击下载链接，浏览器接收到服务器返回的文件内容，根据响应头展示或保存文件，实现了文件下载功能。 总结来说，JSP文件下载是通过前端请求携带参数跳转到处理下载的JSP页面，页面读取服务器上的文件，...
js实现pdf在线预览
07-06
js实现pdf格式在线预览 自己测试通过，不错的工具类，希望能帮助到需要的人 以下是书的内容 给编辑的话： 1、封面建议做得活跃点，比如放授课的场景，放作者的大幅肖像。请考虑是否制作勒口与腰线。 2、内容排版请排得松一些，以便阅读起来轻松一点。 3、文中有许多标粗或放大的字，是关键词语，请想办法突出处理。 4
pdf.js分段加载
01-08
pdf.js默认是支持分段加载，大文件能减少打开时间。 前端代码 var pdfview = _path+'js/pdfjs/web/viewer.html'; function online_pdf(path) { var index= path.lastIndexOf(.); //获取后缀 var ext = path....
strus2文件上传下载
11-18
总的来说，Struts2文件上传下载的实现涉及到前端表单的正确配置、后端Action的处理以及Struts2配置文件中的流式结果设置。理解并掌握这些知识点，可以帮助开发者有效地处理Web应用中的文件操作需求。
java在线预览txt、word、ppt、execel，pdf代码.doc
06-09
在Java后端获取到文件内容后，通常会将内容以JSON或其他合适的数据格式返回给前端。前端可以使用HTML、CSS和JavaScript来构建预览界面，展示这些文本数据。对于复杂格式如表格和列表，可能需要额外的前端库，如...
Java 后端将文件以流的形式返回前端，文件中文字符不显示或者是‘___’解决方法。
子冰吖的博客
05-01 7253
1.问题 在程序在前端调用地址的时候，我们后端通过poi将表格从数据库取出，并用过流返回到前台提供下载，这里我们发现火狐浏览器的下载文件名不显示中文，但是其他浏览器全部正常，所以比较困惑，这里我们发现是火狐浏览器的编码格式导致的这个问题，所以在输出之前我们要将文件名进行处理。 2.解决办法 String filename = "部门表"+date+".xls"; String userAgent ...
后端返回文件流，前端怎么导出、下载
cwb_2120的博客
11-04 1万+
工作中肯定有很多导出excel、下载文件这种功能。一般都是后端做好，我们去请求对应的接口就行了，前端还需要做一些处理就可以实现导出、下载功能了。具体怎么操作呢，我们来看看！
React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject
zhangzhuo1130的博客
08-12 2059
React中后端返回文件流，前端展示PDFfetch请求获取blob和arraybuffer文件流及核心API使用总结。
前端h5 打开pdf文件
skybel的博客
04-22 4010
这个写的是h5在新页面直接加载展示pdf文件的
后端返回pdf文件流,前端vue实现文件打印
09-21
后端返回pdf文件流后，前端Vue可以通过以下步骤实现文件打印： 1. 在Vue组件中创建一个按钮或其他交互元素，用于触发文件打印操作。 2. 当用户点击该按钮时，可以通过Vue的异步请求库（如axios）向后端发送请求，获取pdf文件流。 3. 在Vue组件的methods中定义一个方法，用于处理文件打印逻辑。在这个方法中，可以使用jsPDF库或其他pdf处理库，将获取到的pdf文件流转换为可打印的格式。 4. 在转换完成后，可以使用浏览器的打印功能（如window.print()方法）将文件打印出来。可以根据需求，设置一些打印选项，如选择打印机、设置纸张大小等。 需要注意的是，前端实现文件打印的能力有限，打印效果可能受到浏览器、操作系统以及用户打印设置的影响。同时，还需要确保后端正确返回pdf文件流，并在前端进行相应的处理。在实际开发中，可以根据具体需求和情况对文件打印功能进行进一步定制和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

啃代码的毛毛虫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值