PDF.js在线预览pdf、图片、txt类型文件

最新推荐文章于 2025-05-12 15:08:37 发布

Gyb_csdn

最新推荐文章于 2025-05-12 15:08:37 发布

阅读量2.8w

点赞数 2

分类专栏： web-前端

本文链接：https://blog.youkuaiyun.com/Gyb_csdn/article/details/52598375

版权

web-前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在项目中遇到在线阅读PDF需求时，如何使用PDFObject.js进行预览，但该库在IE和猎豹浏览器中不兼容。为了解决这一问题，转向使用PDF.js，它是一个强大的PDF解析器。虽然PDFObject.js在火狐和谷歌浏览器中表现良好，但在IE环境下，只能依赖PDF.js。作者推荐了一篇详细教程，帮助读者理解和应用PDF.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目有在线阅读pdf的需求，所以找到了PDFObject.js,使用起来也方便，可以在线预览pdf、图片、txt类型文件
，只要引用一个PDFObject.js文件即可，代码

<head>
    <script type="text/javascript" src="plugin/jquery.min.js"></script>
    <script type="text/javascript" src="plugin/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="plugin/PDFObject/pdfobject.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <style>
        .pdfobject-container { height: 500px;}
        .pdfobject { border: 1px solid #666; }
    </style>
</head>

 <button class="btn btn-primary" onclick="preViewPDF()">PDFObject预览本地PDF</button>
 <div id="pdfDiv"></div>

index.js的内容如下：

//预览PDF文件
function preViewPDF(){
    if(PDFObject.supportsPDFs){
           alert("您的浏览器支持PDF预览功能");
    } else {
        var browserType = getOs();
        if(browserType=="Firefox"){
              alert("火狐浏览器支持PDF预览功能");
        }else{
            alert("您的浏览器不支持PDF预览功能");
        }
    }
    PDFObject.embed("files/jsp.pdf", "#pdfDiv");
    //PDFObject.embed("files/1468383501520.jpg", "#pdfDiv");
    //var success = new PDFObject({ url: "files/jsp.pdf" }).embed("pdf");
}

but。。。IE，猎豹浏览器不兼容，TMD,，，，IE就是傻逼，
PDFObject.js对于火狐、谷歌都支持。如果客户用IE浏览器的话，那就没办法了。
哎，为了在IE上能运行，选择用PDFObject官网推荐的PDF.js了。
PDF.js功能强大，他是一个真正的pdf解析器，而PDFObject其实是依赖浏览器支持来显示pdf的。其实要不是IE不支持，用PDFObject.js就足够了，也相当简单。

http://blog.youkuaiyun.com/xiangcns/article/details/42089189
这个人的博客写的很好，都看他的吧，他的Demo可以用，官网上下载的都不能运行，你懂的，害老子调了半天都没出来。

注意：在下载源码时注意把web/viewer.js里的
DEFAULT_URL 改成 ‘09.pdf’：如下
如下图 ;