Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器显示pdf文件

2024-04-30 21:47:47

Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器直接显示pdf文件

测试环境的浏览器版本:

Chrome ：90.0.4430.93（64 位）
FireFox ：88.0 (64 位)
Edge ：90.0.818.49 (64 位)
IE11（使用pdf.js)显示
Opera ：73.0.3856.329 (64 位) / 76.0.4017.94 (64 位)

FireFox 浏览器开启PDF预览

在地址栏输入 → about:config （右上角菜单中的选项）
第一步：搜索 browser.preferences.inContent，如图：
如果没有此配置项，可点击右侧 + 添加配置项

如果为 false 点击右侧左右箭头将值切换为 true 。
第二步：搜索 pdfjs.disabled
如果为 true 点击右侧切换按钮将值切换为 false

Chrome 开启PDF预览

进入设置面（右上角菜单中的设置或在地址栏输入chrome://settings/），
依次进入隐私设置和安全性→网站设置→更多内容设置→PDF 文档，使 “下载 PDF 文件，而不是在 Chrome 中自动打开它们”为未开启状态。

或直接在最上面的搜索栏搜索PDF可快速查找到设置项的路径

前端 Html 与 Javascript脚本使用

<body><div id="reportPdfDoc"style="text-align:center;"></div><script src="/lib/jquery/jquery-2.2.0.min.js"></script><script src="/lib/pdfobject/pdfobject.min.js"></script><script src="/lib/pdf.js/pdf.min.js"></script>
</body>

$(document).ready(function () {if (PDFObject.supportsPDFs) {PDFObject.embed(url, "#reportPdfDoc"{ PDFJS_URL: "/lib/pdf.js/web/viewer.html" });} else {$("#reportPdfDoc").append('<iframe id="reportPdfDocBody" src="/lib/pdf.js/web/viewer.html?file=' + url + '" frameborder="0" style="width:100%;height:100%;"></iframe>');}});
//PDFObject.supportsPDFs 判断是否支持 pdf
//如果不支持则使用 iframe + pdf.js 的方式显示

注意事项

Content-Disposition 头

1、返回 FileContentResult 对象时不能使用FileDownloadName

后端如果直接返回 FileContentResult ，不能直接给 FileDownloadName 赋值，需要通过

Response.Headers.Add("Content-Disposition", "filename=filename.pdf" );

或

Response.Headers.Add("Content-Disposition", "inline;filename=filename.pdf" );

加入头信息，否则返回的Content-Disposition带有attachment;项，Chrome、Edge下会直接保存，FireFox无法加载，IE+Acrobat可以正常加载。

使用FileDownloadName后的Content-Disposition如下：

Content-Disposition: attachment; filename=_0_.pdf; filename*=UTF-8’%E5%90_0_%A9%E5%8D%95.pdf

2、filename的值须使用UrlEncode编码，否则在出现字母外字符后前端不能正常加载。

Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器显示pdf文件相关推荐

html如何跳转到pdf页面,使用PDF.js在网页显示pdf文件并跳转到指定页码
最近在做一个土地档案管理系统 ,有个需求是在前端网页展示土地档案扫描件的pdf文件,并根据目录跳转到指定页. 第一个问题,显示pdf文件.引入pdf.js.然后设定html地址,地址为http://l ...
asp.net core根据用户权限控制页面元素的显示
asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源,显示不同的内容,之前做了一个 AccessControlHelp ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
uniapp 使用pdf.js 加载本地pdf文件报错问题
最近有在做一个移动端的应用,应用里涉及到大量的js游戏开发,使用Android原生做不太合适,就选择了uniapp,其中有一个功能是读取本地的pdf文件并展示.在网上查了点资料都是用pdf.js来开发 ...
JS实现浏览器打印PDF（使用HttpPrinter打印插件）
JS实现浏览器打印PDF(使用HttpPrinter打印插件) 第一步:启动HttpPrinter打印插件第二步:用浏览器打开示例文件\调用示例\websocket协议示例\html\打印pdf.h ...
pdf.js 字体无法显示
pdf.js 字体无法显示前端框架:antdpro 2 使用的插件是react-pdf 不显示的原因:字体文件找不到错误提示:Warning: The CMap "baseUrl&qu ...
android 在线解析pdf文件格式,Android PDF预览阅读：用Mozilla PDF.js浏览本地在线PDF文件 | KaelLi的博客...
在之前的Android端预览PDF方案一文中,曾经提到了使用Mozilla的PDF.js来加载PDF的办法,今天就详细的说一下具体的实现. 简介 PDF.js是一个使用HTML5构建的PDF查看器.由 ...
RAD PDF于Web浏览器的PDF阅读器
RAD PDF 基于Web浏览器的PDF阅读器作为功能最完备的基于HTML的PDF查看器,编辑器和ASP.NET的表单填充器,提供了灵活而强大的替代常规PDF解决方案.与Adobe Acroba ...
在ASP.NET Core中如何将各种文档合并为PDF？Aspose快速搞定！
在各种业务环境中,将各种文档合并为一个PDF是客户最常问的问题之一.例如,假设您的组织有多个应用程序以XPS和PDF生成特定的文档,使用扫描的图像,并且您的用户希望将其中一些文档合并为一个PDF. 本 ...

最新文章

热门文章