显示 pdf--pdf.js使用方法

在做项目的时候有时需要将一个pdf文件展示出来,pc端可以直接使用

<iframe id="xy" src="xxx.pdf"></iframe>

就可以打开pdf预览
但是
在移动端时,这种方法是不可行的

解决方式pdf.js

先下载
链接: https://pan.baidu.com/s/1TpJt2upOZKNC6B23AVZarA 提取码: t5q3

下载下来后将压缩包解压,会有一个PDF.js文件夹

image.png

然后将PDF.js文件扔进服务器中(随便你扔进哪啦,路径自己知道就行)
然后在浏览器访问PDF.js 中 web 文件夹下 viewer.html 文件 (PDF.js/web/viewer.html)

例如:http://192.168.1.146:8888/js/PDF.js/web/viewer.html

如果能看到

image.png

那么你已经一只脚踏进成功的大门了

接下来我们只需要在html中进行一丢丢处理就可以了,如下

<iframe  src="http://192.168.1.146:2020/js/PDF.js/web/viewer.html?file=你的pdf路径(绝对路径)"></iframe>

你有没有成功呢?
欢迎留言交流~~~

补充:如果你不需要pdf上显示下面这些玩意

image.png

可以使用如下方法消灭它(官方配置我没找到⊙﹏⊙‖∣)

<body>
        <iframe id="xy" src="http://192.168.1.146:2020/js/PDF.js/web/viewer.html?file=http://192.168.1.146:2020/image/test.pdf"></iframe>
        <script type="text/javascript">
                $('#xy').load(function(){
                    $('#xy').contents().find('body').find('#secondaryToolbarToggle').hide();
                    $('#xy').contents().find('body').find('#viewFind').hide();
                    $('#xy').contents().find('body').find('#sidebarToggle').hide();
                    $('#xy').contents().find('body').find('#toolbarViewerMiddle').css('float','right');
                });
        </script>
    </body>

image.png

点赞.jpg

显示 pdf--pdf.js使用方法

推荐阅读更多精彩内容