网页显示打印 pdf

文件服务使用 minio,使用 nginx 反向代理。

将文件存放在 minio 上,如果是公开的文件,则统一放到一个桶,设置为公开只读。

如果是私有文件,则使用临时链接,给有权限的用户查看和打印。

要实现在 html 页面上,弹框显示 pdf 和打印。

遇到问题:

问题 1 跨域安全问题,浏览器不允许加载

由于我的某个主页面上加了安全标签(<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">),导致报错:"Failed to load resource: net::ERR_CONNECTION_RESET", 请求头出现警告信息:"Provisional headers are shown Learn more"

demo 页面就可以正常下载文件,排查了好久才发现是安全标签的问题。

问题 2 显示 pdf 文件

从后端把 minio 中的 pdf 文件链接(使用 minio 的客户端生产的临时链接)返回给前端,但是 浏览一直不显示文件,直接就下载了保存到了本地,使用 embed 标签或者 iframe 都不行。以为是 nginx 问题,不管如何配置,都不行。后来使用 pdf.js 来处理,果然可以显示 pdf 文件。

问题 3 打印 pdf 文件。

打印 pdf ,并没有达到效果,打印的竟然是网页页面,折腾了好久,都不能实现打印 pdf 原文件。

最后决定后端把 pdf 文件下载到 tomcat 的目录,再把这个 tomcat 中的文件链接返回给前端。使用 spring 的 restTemplate 来下载文件(临时链接),结果遇到 403 ,真奇怪。不管我如何处理,始终报 403。后面参考(设置 user agent)了别人的做法,终于可以下载了。

复制代码
String u = URLDecoder.decode(addr, StandardCharsets.UTF_8.name());
            URL url = new URL(u);
            HttpURLConnection connection = ((HttpURLConnection)url.openConnection());
            connection.addRequestProperty("User-Agent", "Mozilla/4.0"); // 这里是用来处理 403 错误的。
            InputStream input = null;
            try {
                if (connection.getResponseCode() == 200) {
                    Map<String, List<String>> headerFields = connection.getHeaderFields();
                    headerFields.forEach((key,list)->{
                        if (key != null) {
                            response.setHeader(key, list.get(0));
                        }
                    });
                    input = connection.getInputStream();
                    // 文件流复制/转发
                    StreamUtils.copy(input, response.getOutputStream());
                } else {
                    input = connection.getErrorStream();
                }
            } finally {
                try {
                    input.close();
                } catch (Exception e) {

                }
            }

后来我一想,直接新开文件下载接口,把 pdf 文件下载文件流直接转发给前端 iframe ,看看如何。 结果成功显示并且还可以打印。此时我并没设置 Content-Type 返回头 header。让我顿然开朗,马上检查在 minio 中的文件的 content type 为 application/octet-stream ,不是 pdf 类型。原来文件上传到 minio 时没有处理好文件类型。导致下载文件时,浏览器直接把文件下载。处理好后,重新上传 pdf 文件,文件类型为 application/pdf。在文件下载文件流转发给前端时,把下载时返回 header 也全部转发给前端,达到想要的效果。

然后我再重新把 pdf 文件的 minio 的临时链接给 iframe 的 src,成功达到效果。

总结:要注意跨域问题,即使在本地开发,localhost 和 本机 Ip 两个方式也会存在跨域问题。

文件流可以直接转发。文件类型要正确,否则浏览器不会打开显示文件,会直接下载。

相关推荐
李小白杂货铺14 小时前
从基于pdf2htmlEX技术的PDF预览页面提取原始PDF文件的方法原理与实践
pdf·自动化脚本·pdf预览页面·提取pdf文件·自动化提取pdf脚本·pdf2htmlex·原始pdf文件
小许好楠14 小时前
【itext操作pdf】
pdf
aFakeProgramer20 小时前
PDF文档拆分办公工具
pdf
reasonsummer20 小时前
【办公类-125-01】20260106期末资料多个docx合并成一个PDF打印(单数页+1空白页,双数页不变)
python·pdf
YJlio1 天前
Sysinternals 学习笔记(15.0):系统信息工具总览——RAMMap、RU、CoreInfo 等一网打尽
开发语言·笔记·python·学习·django·pdf·硬件架构
私人珍藏库1 天前
[吾爱大神原创工具] 【PDF去除水印的工具】可视化操作界面,支持区域删除和文字删除两种模式
pdf
杨浦老苏1 天前
PDF图书馆索引器和阅读器Inkheart
docker·pdf·群晖·电子书
薛定谔的猫19821 天前
RAG(四) LangChain 使用PyPDFLoader加载 PDF 并实现内容总结功能
langchain·pdf·php
小粉粉hhh1 天前
记录前端菜鸟的日常——Pdf.js与双指缩放
前端·javascript·pdf
weixin_436804071 天前
在线媒体预览工具 - 免下载查看图片视频音频PDF
pdf·音视频·媒体