在做项目的时候有时需要将一个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
