微信小程序技巧：在无需下载的情况下预览 PDF

前端

2023-12-11 02:26:14

微信小程序中的 PDF 预览痛点

对于微信小程序开发人员而言，为用户提供 PDF 文件预览功能至关重要。然而，传统的预览方法（即下载后打开）存在以下痛点：

下载等待时间长： 用户必须等待文件下载完成，才能预览。
占用存储空间： 下载的 PDF 文件会占用设备存储空间，这对于存储空间有限的小程序用户来说是个问题。
分享和发送问题： 分享或发送 PDF 文件后，文件的后缀可能会丢失，导致收件人在手机上无法打开文件。

创新解决方案：在小程序中预览 PDF

为了解决上述痛点，本文提出了一种创新解决方案，可在微信小程序中直接预览 PDF 文件，无需下载或安装任何第三方应用。该方法利用了微信小程序的外链打开 功能，步骤如下：

获取 PDF 文件的 URL： 可以通过后端接口或直接从 PDF 文件中获取 PDF 文件的 URL。
生成外链： 使用微信小程序的wx.cloud.downloadFile({fileid, success}) API 生成一个指向 PDF 文件的外链。
打开外链： 使用wx.downloadFile({url, success}) API 打开外链，并在 success 回调函数中将 PDF 文件显示在小程序的WebView 组件中。

解决分享和发送问题

当用户分享或发送 PDF 文件时，微信小程序会自动添加文件后缀。这确保了收件人在手机上也能打开 PDF 文件。

示例代码

// 获取 PDF 文件的 URL
const pdfUrl = await getPdfUrl();

// 生成外链
const cloudPath = 'cloudPath/to/pdf.pdf';
const fileID = await wx.cloud.uploadFile({
  cloudPath,
  filePath: pdfUrl,
});

// 打开外链
wx.downloadFile({
  url: `cloud://${fileID.config.env}.${fileID.config.region}.myqcloud.com/${cloudPath}`,
  success: (res) => {
    wx.previewImage({
      current: res.tempFilePath,
      urls: [res.tempFilePath],
    });
  },
});