微信小程序实现PDF预览功能——pdf.js(含源码解析）

---

前言

前一段时间遇到了一个需求，关于 pdf 文件的预览，客户要求如下：

• 只能在微信小程序内预览，不能调起本地浏览器预览；
• 需要让用户强制阅读 10s 后才算阅读完成，进而进行下一步操作；
• 用户不能下载预览的 pdf 文件；

因为一些原因（此处省略一万字🐎），这个项目具有 H5 端和原生微信小程序端，并且他们有着相同的业务逻辑😊，所以最好的办法就是设计出一套方案适用两端，前期做了一些尝试，可以看这篇文章，最后决定使用 pdf.js 来实现业务要求。

---

一、pdf.js 是什么？

PDF.js 由 Mozilla 提供支持。目标是创建一个通用的、基于 Web 标准的平台，用于解析和呈现 PDF。

二、使用步骤

1.下载库文件

前往 pdf.js 的 官网 下载库文件，我们下载哪个版本都是可以的，后者适用于旧版浏览器，我这里下载的后者。

下载完成后，因为微信小程序打包的限制，我将库文件放到腾讯云服务器上，如果想测试可以联系我提供测试资源。
H5 可以放到本地，目录如下：

2.使用方式

通过web目录下 viewer.html 查看器 + pdf文件路径预览pdf文件

yourPath/web/viewer.html?file=pdfPath 

微信小程序端——使用 web-view 标签

代码示例：

//.wxml
<web-view src="{
   {pdfView+pdfUrl}}" ></web-view>

//.js
data: {
   
		// viewer.html 查看器的路径
        pdfView:"yourPath/web/viewer.html?file=",
        // 要预览的 pdf 文件的路径
        pdfUrl:"http://play.li-stack.top:88/pdf/sjisr-3-2-36-42.pdf"
    },

运行效果：

H5 端——使用 iframe 标签（使用vue框架）

代码示例：

<template>
    <div>
        <iframe :src="src" style="width: 100%;height: 100vh" >