在微信小程序中,可以通过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文件的链接需要在同一个域名下。预览方法是:
专业版中已经集成PDF.js框架,支持通过PDF链接在浏览器和小程序中预览PDF文件,您可以在专业版中体验该功能的效果。
预览pdf文件:微牧小程序专业版.pdf
注意,上述方法中PDF文件链接的域名需要在小程序业务域名中设置,虽然也支持跨域{}DF链接,但需要特殊处理,具体见链接:#faq-xhr
使用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的更多信息可以参考官方网站: