你想要的PDF预览新方式，微信小程序绝对不容错过

前言

随着微信小程序的不断发展和变革，越来越多的功能被开发出来，其中预览 PDF 文件功能也已经成为小程序的常见应用之一。今天，我们将针对微信小程序预览 PDF 这一功能，为大家详细解析和介绍。

---

实现思路

1. 在小程序界面中添加一个按钮，并为其绑定一个点击事件；
2. 在事件中调用 wx.downloadFile 方法，指定要下载的 pdf 文件的 url 和存储路径；
3. 下载完成后，再调用 wx.openDocument 方法打开该文件预览。在调用此方法时，需要把之前存储的文件路径传入。

注意： 由于微信小程序的安全限制，必须先调用 wx.downloadFile 方法下载文件，才能在小程序中打开该文件。

---

wx.downloadFile(Object object)

参数

参数	类型	是否必填	说明
url	string	是	下载资源的 url
header	Object	否	HTTP 请求的 Header，Header 中不能设置 Referer
timeout	number	否	超时时间，单位为毫秒
filePath	string	否	指定文件下载后存储的路径 (本地路径)
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

wx.downloadFile({
  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  success (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.playVoice({
        filePath: res.tempFilePath
      })
    }
  }
})

该方法的完整文档信息大家可以『点击这里』查看。

---

wx.openDocument(Object object)

参数

参数	类型	是否必填	说明
filePath	string	是	文件路径 (本地路径) ，可通过 downloadFile 获得
showMenu	boolean	否	默认值为false，是否显示右上角菜单
fileType	string	否	文件类型，指定文件类型打开文件
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

wx.downloadFile({
  // 示例 url，并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

该方法的完整文档信息大家可以『点击这里』查看。

---

实践

看到这里，相信大家对这两个方法已经有了一定的了解，下面我们直接用一个更完整的实例来帮助大家更好的使用该方法实现预览 pdf 的功能。话不多说，下面直接看代码。

wxml 文件

<view>
	<button bindtap="itemPdfOn" type="primary">点我预览</button>
</view>

js 文件

Page({
    // 查看pdf事件方法  
    itemPdfOn() {
        wx.showLoading({
            title: '加载中',
        })
        // 下载文件方法
        wx.downloadFile({
            url: 'https://s30.aconvert.com/convert/p3r68-cdx67/ah4fu-1s24x.pdf',
            success: function (res) {
                var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
                wx.openDocument({
                    filePath: Path,
                    success: function () {
                        console.log("打开文档成功");
                        wx.hideLoading()
                    }
                })
            },
            fail: function (res) {
                console.log(res);
            }
        })
    },
})

---

实现效果