在微信小程序中,可以通过wx.和wx.这两个API下载和打开PDF文件。这种方式主要有很多缺点:
1.需要先下载才可以查看,而且每次打开都需要下载并生成临时文件,如果PDF文件很多的话,临时文件会越来越多,如果PDF文件很大的话,打开就会很慢。
2.导航栏显示的标题是临时文件名,看上去不够优雅。
3.翻页不方便。
小程序里能直接预览PDF吗? 我试过在微信小程序的web-view中显示PDF文件,在开发工具里可以显示,但在实体设备上却不行。 在微信开放社区看到有人使用PDF.js在浏览器中打开PDF文件。 PDF.js是由微信支持的,它的目标是打造一个通用的、基于Web标准的PDF解析和呈现平台。 PDF.js解析的PDF文件通过web-view打开时无法在微信开发工具中正常显示,但好消息是:在实体设备上可以正常显示。
使用PDF.js解析PDF的方法如下:
1.前往PDF.js官方网站下载此框架:
2.将PDF.js部署到网站。PDF.js有两个文件夹web和。将这两个文件放在网站上的某个目录下,比如目录。web目录下有一个.html文件,可以用来在线解析PDF文件。当然PDF文件的链接需要在同一个域名下。预览方法是:
然后在 web-view 中打开此链接即可直接预览 PDF 文件。
注意,上述方法中PDF文件链接的域名需要在小程序业务域名中设置,虽然也支持跨域链接,但是需要特殊处理,具体请看链接:
使用PDF.js在微信小程序中预览PDF文件,并支持PDF.js的相关功能,如:侧边栏、搜索、分页、缩放、添加文字、绘图、旋转、演示模式等。
以上是通过官方的.html来展示PDF文件,也可以通过引入PDF.js来解析显示,此方法可以自定义功能,方法如下:
1.引入pdf.js库
<script src="./build/pdf.js">script> <script src="./build//pdf.worker.js">script>
2.接收需要读取的PDF内容并显示
<canvas id="myCanvas">canvas>
3.创建PDF对象:数据可以是PDF文件对应的字符串,也可以是文件的相对或绝对路径,也可以是在线文件URL地址
var loadingTask = pdfjsLib.getDocument(data) loadingTask.promise.then(function (pdf) { for (var i = 1; i <= pdf.numPages; i++) { pdf.getPage(1).then(function (page) { var scale = 2 var viewport = page.getViewport({ scale: scale }) var canvas = document.getElementById('myCanvas') var context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width var renderContext = { canvasContext: context, viewport: viewport, }; page.render(renderContext); }) } });
关于PDF.js的更多信息可以参考官方网站: