android_yang
android_yang
  • 发布:2018-06-19 17:23
  • 更新:2024-11-14 10:16
  • 阅读:28699

pdf.js使用总结

分类:HBuilder
pdf

ps:文中图片显示的浏览效果不佳是因为PDF文件没有按照原始尺寸大小显示,最后一张图是按原始大小显示的。

由于最新有个功能需求为浏览文档,而其中一种文档格式就是PDF,怎么查看PDF文件呢?网上查了相关资料,经过综合考虑认为集成tbs或psdf.js是比较好的实现方式。tbs只支持Android,而且需要离线打包,暂时放下。在此先记录pdf.js的使用:

pdf.js地址:pdf.js

如何下载pdf.js,github里有详细的介绍,并且提供了一些使用demo。不过demo都是需要配合服务器,可能是因为开发者的本意是做PDF的在线浏览。而今天要记录的是在不使用自己的服务器的情况下,用HBuilder如何使用pdf.js。

总共有3种使用方式:
1.下载pdf.js到本地
将从GitHub下载好的pdf.js项目build目录下的generic目录及其目录下所有文件拷贝到自己的项目中

将目录名'generic'改为'pdfjs'(为何要改为psdjs,这和pdf.js这个js文件中的引用有关,看源码便知),目录结构和所含文件如图所示。

mui.openWindow({  
                    url: 'viewer.html路径?PDF文件路径',  
                          // 本地PDF文件url示例:'_www/pdfjs/web/viewer.html?file=file:///storage/emulated/0/xxx.pdf'  
                    id: 'pdf_preview',  
                    show: {  
                        duration: 300  
                    }  
                }

使用如上代码并可浏览PDF文件了,其中viewer.html就是浏览界面(由demo提供),如要添加按back键返回功能,引入mui.js便可。界面也可以根据自己的需求进行修改。
优点:无网络环境下也可正常浏览本地文件,速度相对其他两种较快
缺点:插件体积有点大

2.使用mozilla部署在github pages上的Viewer

mui.openWindow({  
                    url:'http://mozilla.github.io/pdf.js/web/viewer.html?PDF文件路径',  
                         // 网络PDF文件url示例:'http://mozilla.github.io/pdf.js/web/viewer.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
                    id: 'pdf1',  
                    show: {  
                        duration: 300  
                    }  
                })

使用如上代码并可浏览PDF文件了,其中viewer.html就是浏览界面(由demo提供),界面无法修改。
优点:无需下载插件,便可直接使用
缺点:无法浏览本地文件,需要网络,网络文件较大时加载慢,浏览界面无回退功能(用双webview可实现回退)、无法修改,会有跨域问题

3.自定义预览界面,pdf.js使用cdn的方式导入

mui.openWindow({  
                    url: '自定义HTML路径?pdf路径',   
                          // 本地PDF文件url示例:'_www/pdfjs/index.html?file:///storage/emulated/0/tbs.pdf'  
                          // 网络PDF文件url示例:'_www/pdfjs/index.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
                    id: 'pdf3',  
                    show: {  
                        duration: 300  
                    }  
                })

使用如上代码便可浏览PDF文件了
优点:无需下载插件,使用简单,
缺点:需要网络

4.把pdf.js部署到服务端
和第3种方式类似,区别在于需要自己去部署服务器,之后的使用方法一样。

问题1:在直接实现预览的时候遇到显示模糊的问题,通过增大scale系数解决
var viewport = page.getViewport(2.0);//设置为2.0

问题2:pdf内容显示不完整,通过设置cMapUrl和cMapPacked解决
PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/';
PDFJS.cMapPacked = true;

实际大小显示效果(横屏):

demo在附件

2 关注 分享
张一三 菜鸡

要回复文章请先登录注册

8***@qq.com

8***@qq.com

回复 南黎2024 :
本地文件也可以预览,https://www.bilibili.com/cheese/play/ss60198 实操验证过了的安卓端 (ios没验证)
2024-11-14 10:16
1***@163.com

1***@163.com

为啥ios不显示内容 安卓显示
2024-11-05 10:54
南黎2024

南黎2024

大佬用的webview吗?
我也用了plus.io.convertLocalFileSystemURL('_doc/uniapp_save/17168815580500.pdf')
得到了本地绝对路径
但是我直接传给webview的src 无法加载pdf,如果我传入网络的pdf url是可以的
主要是我希望预览一次后本地缓存 下次直接用本地 节省带宽
2024-05-29 09:13
南黎2024

南黎2024

为什么我h5可以正常pdf 但是app模拟器用不起来 pdf不显示
2024-05-03 17:41
穷奇先生

穷奇先生

回复 胡子tao :
前端实现也简单,https://blog.csdn.net/MrHao_/article/details/108983880 这是我的总结
2020-10-21 11:37
胡子tao

胡子tao

回复 穷奇先生 :
后边实现了,只是也想用前端来实现看看
2020-10-21 11:31
穷奇先生

穷奇先生

回复 胡子tao :
转图片是后端,直接显示不是更好吗,为啥要转图片
2020-10-21 10:06
胡子tao

胡子tao

线上pdf地址,转成图片(jpg/png),在uniapp h5 端页面中显示,求社区里大神给个demo,小白勿喷
2020-10-16 11:29
胡子tao

胡子tao

怎么转成图片jpg、png呢?上面的demo都是显示,求解答
2020-10-16 11:27
[已删除]

[已删除]

██████黄直播【 5kky.com 】 ██████

██████黄直播【 5kky.com 】 ██████
2019-05-11 17:17