uniapp微信小程序使用pdfjs预览pdf文件

### 实现 UniApp 微信小程序中 PDF 文件预览

在 UniApp 开发的微信小程序环境中，直接集成 `PDF.js` 库来实现在应用内浏览 PDF 文档的功能并非最简便的方式。通常情况下，对于微信小程序而言，更推荐利用内置 API 来处理文件下载与打开操作[^1]。

然而，如果确实有需求通过 `PDF.js` 进行自定义渲染，则需要注意以下几点：

#### 准备工作
首先需确认所使用的 `PDF.js` 版本兼容于微信小程序环境，并且考虑到小程序对 Web Worker 的支持有限制，可能需要调整默认配置以适应此平台特性。

#### 加载 PDF.js 资源
由于微信小程序不完全遵循标准浏览器行为模式，因此加载外部 JavaScript 和 CSS 可能会遇到权限问题。建议将必要的 `PDF.js` 文件（如 pdf.worker.min.js）放置到项目的 static 或 assets 目录下并本地引入。

<script type="module">
import { createWorker } from '@/static/pdfjs/build/pdf';
</script>

#### 初始化 PDF.js 工作线程
创建一个新的 worker 对象用于执行后台任务而不阻塞主线程。注意这里要指定正确的路径指向之前提到的工作脚本位置。

let loadingTask;
const url = 'your-pdf-url'; // 替换成实际的PDF链接

// 创建worker实例
async function initPdfJs() {
    const workerSrc = '/static/pdfjs/build/pdf.worker.min.js';
    await importScripts(workerSrc);
}
initPdfJs();

#### 渲染页面内容
获取文档对象后可以调用相应接口读取每一页的内容并绘制至 canvas 上显示给用户查看。

loadingTask = pdf.createLoadingTask(url);

loadingTask.promise.then(pdf => {
    console.log('Total pages: ' + pdf.numPages);
    
    renderPage(1); // 默认从第一页开始
    
}).catch(reason => {
    console.error(reason);
});

function renderPage(num) {
    loadingTask.promise.then(pdf => {
        pdf.getPage(num).then(page => {

            let scale = 1.5;
            let viewport = page.getViewport({scale});
            
            // Prepare canvas using PDF page dimensions.
            let canvas = document.getElementById('the-canvas');
            let context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context.
            let renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    })
}

以上代码片段展示了如何基于 `PDF.js` 在 UniApp 构建的小程序里解析和呈现 PDF 页面。不过值得注意的是这种方法增加了项目复杂度以及潜在性能开销，除非特别必要一般还是优先考虑官方提供的简易方案即使用 `uni.downloadFile()` 结合 `uni.openDocument()` 完成相同目标。