PDFObject无法加载远程url和不支持IE浏览器解决方案

PDFObject.js使用与问题解决

最新推荐文章于 2024-10-19 13:22:40 发布

原创最新推荐文章于 2024-10-19 13:22:40 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#PDFObject

问题记录专栏收录该内容

2 篇文章

订阅专栏

本文介绍PDFObject.js在HTML页面预览PDF文件的方法，包括本地与远程URL加载问题及IE浏览器兼容性的解决方案。

三、PDFObject不支持IE(8,9,11)浏览器

问题描述:

解决方案:

一、PDFObject.js简单使用

PDFObject.js可以实现在html页面动态加载pdf, 以实现在页面预览pdf文件的功能; 官网地址: https://pdfobject.com/; 详细使用可以看官网的例子

使用示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>pdf测试</title>
    </head>
    <body>
        <div id="example" style="width: 1000px;height: 500px"></div>
         <!-- 引入pdfobject.min.js -->
        <script type="text/javascript" src="./pdfobject.min.js"></script>
        <script>
            PDFObject.embed("./test.pdf","#example");
        </script>
    </body>
</html>

效果展示:

二、PDFObject无法加载远程url

问题描述:

上面的示例中使用的是本地路径, 但是在实际项目中通常使用的是图片服务器的url地址, 例如:

PDFObject.embed("http://192.22.222.222:51008/test-pic/java.pdf","#example");

在打开浏览器后, pdf并没有加载出来; 查看网络信息, 看一下文件是否从数据库下载下来了

从传输数据量大小可以看出文件信息已经从服务器下载到浏览器上了, 但是没有显示; 这是因为, 在返回数据的头文件中的Content-Type为application/octet-stream; 而octet-stream是不确定下载文件的通用指定, 所以pdfObject组件无法识别此文件, 也就无法展示pdf文件了

解决方案:

1. 将url改为请求信息, 在后台去下载此文件

var url = ' http://192.22.222.222:51008/test-pic/java.pdf ';

PDFObject.embed("/nyController/pdfPreview?url="+url, "#example");

2. 在控制层编写方法, 去下载目标文件的信息, 然后将流信息输出到页面上; 注意一定要设置头信息, 让组件可以识别这个文件流

response.setContentType("application/pdf;charset=UTF-8")

具体的方法步骤就不再贴出来了, 因为不同的业务场景使用的获取流方法不一样; 这里主要目的就是设置输出流的头信息;

3. 修改完成之后再打开浏览器就可以正常预览了pdf文件了

三、PDFObject不支持IE(8,9,11)浏览器

问题描述:

在上面的步骤之后已经实现在谷歌浏览器上完成pdf预览功能, 但是如果在ie浏览器上则会提示组件不支持的问题

但是官网上说是可以支持ie9-11的. . .

解决方案:

在网上找了很久也没有好的解决方案, 基本上都是更换其他组件, 例如pdf.js;

但是还有一个方案可以解决, 就是需要在电脑上下载Adobe Acrobat Reader这个pdf阅读器, 并且安装, 安装之后将pdf文件默认打开工具设为Adobe Acrobat Reader, 然后重启电脑; 这样, ie浏览器加载pdf文件时会去使用该软件的内置控件; 也就可以实现在ie浏览器上预览pdf文件的功能

如图: