pdf.js实现在线预览PDF

最新推荐文章于 2024-10-12 22:32:21 发布

纸上得来终觉浅，绝知此事要躬行

最新推荐文章于 2024-10-12 22:32:21 发布

阅读量2.5k

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/a294634473/article/details/102567954

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

pdf.js实现在线预览PDF

前言

前言

pdf.js 是一个很好的在线预览PDF的js框架。本人测试支持ie11、chrome、360.

下载

pdf.js 下载地址解压之后直接放到前端项目中。

使用

这个是我的目录结构
在这里插入图片描述

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<script src="bootstrap2/js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#displayPdfIframe").attr("src",'pdf/web/viewer.html?file=' + encodeURIComponent('http://172.16.12.32:8889/TestPdf/pdf2/20190926104341.pdf'));
    });
</script>
</head>
<body>
<div class="ctrlDiv">
    <div class="eleContainer elePaddingBtm">
        <iframe id="displayPdfIframe" width="100%" height="100%"></iframe>
    </div>
</div>
</body>
</html>

参数处理

我这边是采用nginx代理文件的形式
也可以采用接口形式(返回流的形式)
只是要注意接口如果要有参数的话要用encodeURIComponent处理一下。不然的话参数会消失

 $("#displayPdfIframe").attr("src",'pdf/web/viewer.html?file=' + encodeURIComponent('http://172.16.12.32:8889/TestPdf/pdf2/20190926104341.pdf'));

跨域处理

如果出现跨域问题，除了自身问题还有可能是web/viewer.js 文件里的问题。把下图中的注释即可。
在这里插入图片描述

还有什么问题可以一起讨论一下