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

最新推荐文章于 2023-12-19 09:06:23 发布

fcroomhq1

最新推荐文章于 2023-12-19 09:06:23 发布

阅读量1.9k

点赞数 2

分类专栏： NetCore 文章标签： web xpdf javascript

本文链接：https://blog.csdn.net/fcroomhq1/article/details/116259649

版权

NetCore 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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，如图：
browser.preferences.inContent配置项不存在的结果如果没有此配置项，可点击右侧 + 添加配置项

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

Chrome 开启PDF预览

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

或直接在最上面的搜索栏搜索PDF可快速查找到设置项的路径
搜索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编码，否则在出现字母外字符后前端不能正常加载。

fcroomhq1

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器显示pdf文件

Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器直接显示pdf文件测试环境的浏览器版本:Chrome ：90.0.4430.93（64 位）FireFox ：88.0 (64 位)Edge ：90.0.818.49 (64 位)IE ：IE + AcrobatPDFReaderFireFox 浏览器开启PDF预览在地址栏输入 → about:config第一步：搜索 browser.preferences.inContent，如图：如果没有此配置项，
复制链接

扫一扫