pdf.js 微信小程序使用

### 集成和使用 PDF.js 在微信小程序中显示 PDF 文件

#### 准备工作
为了顺利集成并使用 PDF.js，在开始之前需确认已安装好开发环境，并获取最新版本的 Pdf.js 插件[^2]。

#### 创建项目结构
创建一个新的 UniApp 或者直接基于现有微信小程序工程引入所需资源。确保目录中有适当的空间来放置来自 GitCode 的 Pdf.js 插件文件夹及其依赖项。

#### 安装插件
按照官方提供的指南，下载并解压 Pdf.js 小程序专用版至本地项目路径下。对于微信小程序而言，这一步骤通常涉及将压缩包内的 `components` 和其他静态资源复制粘贴到合适位置。

#### 初始化配置
编辑 app.json 或 pages 中对应页面 json 文件，注册组件以便后续引用。例如：

{
  "usingComponents": {
    "pdf-viewer": "/path/to/pdfjs-component"
  }
}

此处 `/path/to/pdfjs-component` 应替换为实际存放 pdf viewer 组件的位置。

#### 编写 WXML 页面布局
在希望嵌入 PDF 查看器的地方编写如下代码片段：

<view class="container">
  <!-- 使用自定义组件 -->
  <pdf-viewer id="my-pdf" src="{{url}}" />
</view>

这里假设数据绑定变量 `{{url}}` 已经被赋予了一个有效的在线或离线 PDF 文档链接[^1]。

#### JavaScript 控制逻辑
最后，在对应的 JS 文件里添加必要的事件监听以及初始化参数设定：

Page({
  data: {
    url: 'https://example.com/sample.pdf' // 替换成目标PDF的实际URL
  },
  
  onLoad() {
    const query = wx.createSelectorQuery();
    
    this.viewer = query.select('#my-pdf');
    
    // 可选：设置一些默认行为如自动缩放等
    this.viewer.scale(0.8);
  },

  onReady() {
    // 当页面初次渲染完成时触发
  }

})

上述脚本展示了如何通过选择器查询获得对 `<pdf-viewer>` 实例的操作权限，并对其执行诸如调整比例之类的操作。

#### 测试验证
保存更改后运行模拟器测试效果；也可以上传 APK 到手机真机调试以检验跨设备兼容性和性能表现。注意观察控制台日志输出排查可能出现的问题[^3]。