微信小程序webview嵌套iframe嵌入PDF文档的解决方案

前端

2023-12-31 12:48:42

在微信小程序中嵌入PDF文档：突破挑战，实现完美呈现

什么是微信小程序？

微信小程序是一种轻量级应用，可运行于微信生态系统内。凭借其便捷、轻量的特性，小程序深受用户欢迎。然而，在小程序中嵌入某些文件类型，如PDF文档，仍存在一些挑战。

为何在微信小程序中嵌入PDF文档存在挑战？

业务域名配置复杂： 小程序的WebView需要配置业务域名，但WebView中的iframe网址也需要配置业务域名。对于需要使用OSS地址作为业务域名的开发人员，这是一个无法解决的难题。
PDF文档下载困难： 由于无法配置业务域名，小程序无法直接下载PDF文档，导致无法通过wx.openDocument进行预览。

解决方案：结合业务域名配置、下载与预览

为了解决上述挑战，本文提出了一种结合业务域名配置、下载和预览的解决方案：

1. 业务域名配置

将PDF文档上传至OSS服务器并设置公共读权限。
在OSS控制台中获取PDF文件的访问链接。
在小程序中将OSS地址设置为业务域名。

2. 下载PDF

使用网络请求将PDF文件的访问链接发送至服务器端。
服务器端收到请求后，使用文件流的方式将PDF文件下载至本地。

3. 预览PDF

将下载的PDF文件路径传递给wx.openDocument方法。
调用wx.openDocument方法，即可在WebView中打开PDF文档。

示例代码：

获取PDF文件访问链接：

// 上传PDF文件至OSS服务器
client.put('my-pdf.pdf', 'path/to/local/pdf', {
  headers: {
    'Content-Type': 'application/pdf',
  },
}).then(result => {
  console.log('PDF uploaded successfully.');
}).catch(err => {
  console.error('Error uploading PDF:', err);
});

// 获取PDF文件的访问链接
client.getSignedUrl('my-pdf.pdf').then(url => {
  console.log('PDF access URL:', url);
});

小程序业务域名配置：

// app.js
App({
  globalData: {
    businessDomain: 'https://your-oss-bucket.oss-cn-hangzhou.aliyuncs.com',
  },
});

发送请求下载PDF：

// pages/index/index.js
const app = getApp();

Page({
  onLoad() {
    wx.request({
      url: 'https://your-server.com/pdf-download',
      data: {
        pdfUrl: app.globalData.businessDomain + '/my-pdf.pdf',
      },
      success(res) {
        // 服务器端返回PDF文件的本地路径
        const pdfFilePath = res.data.pdfFilePath;

        // 调用wx.openDocument方法打开PDF文档
        wx.openDocument({
          filePath: pdfFilePath,
          success() {
            console.log('PDF opened successfully.');
          },
          fail(err) {
            console.error('Error opening PDF:', err);
          },
        });
      },
      fail(err) {
        console.error('Error downloading PDF:', err);
      },
    });
  },
});