uniapp APP 端如何预览pdf（后端返回链接）

在 UniApp 中实现安卓端 PDF 文件查看，主要有以下几种方案（从简单到复杂）：

---

方案一：使用系统默认应用打开（推荐简单场景）

通过下载 PDF 文件后，调用系统默认的 PDF 应用打开（如 WPS、Adobe Reader 等）。

// 示例代码：下载并打开 PDF
uni.downloadFile({
  url: 'https://example.com/file.pdf', // 在线 PDF 地址
  success: (res) => {
    if (res.statusCode === 200) {
      uni.openDocument({
        filePath: res.tempFilePath, // 临时文件路径
        fileType: 'pdf',
        success: () => console.log('打开成功'),
        fail: (err) => console.error('打开失败', err)
      });
    }
  },
  fail: (err) => console.error('下载失败', err)
});

优点：原生支持，无需额外插件
缺点：会跳转到其他应用

---

方案二：使用 WebView 在线预览（需网络）

通过 web-view 组件加载在线 PDF（需网络支持）：

<template>
  <web-view :src="pdfUrl"></web-view>
</template>

<script>
export default {
  data() {
    return {
      // 使用 Google 文档预览服务（需FQ）或国内服务
      pdfUrl: 'https://docs.google.com/gview?embedded=true&url=https://example.com/file.pdf'
      
      // 或使用国内服务（示例，需自行替换）
      // pdfUrl: 'https://view.xdocin.com/view?src=' + encodeURIComponent('https://example.com/file.pdf')
    }
  }
}
</script>

注意：谷歌服务需FQ，国内可替换为 xdocin 等在线预览服务。

---

方案三：集成原生 PDF 插件（功能强大）

使用 UniApp 原生插件实现 应用内嵌入式预览：

步骤：

1. 安装插件
   在插件市场搜索 PDF 预览插件，例如：

   • 安卓推荐：zhangwei-uvue-pdf-viewer（支持 UVUE）

   • 或通用版：pdf-viewer

2. 引入插件
   根据插件文档配置原生模块（部分需离线打包）。

3. 代码示例：

<template>
  <!-- 根据插件文档使用组件 -->
  <pdf-viewer :src="localPath"></pdf-viewer>
</template>

<script>
export default {
  data() {
    return {
      localPath: '' // 本地文件路径
    }
  },
  mounted() {
    // 下载文件到本地
    uni.downloadFile({
      url: 'https://example.com/file.pdf',
      success: (res) => this.localPath = res.tempFilePath
    });
  }
}
</script>

---

方案四：使用 PDF.js 自定义渲染（纯前端）

通过 pdf.js 实现纯前端渲染（兼容 H5 和部分安卓）：

<template>
  <view>
    <canvas v-for="page in pages" :id="'canvas-'+page" :key="page"></canvas>
  </view>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/build/pdf.worker.entry';

export default {
  data() {
    return {
      pdfDoc: null,
      pages: 0
    }
  },
  async mounted() {
    const loadingTask = pdfjsLib.getDocument('https://example.com/file.pdf');
    this.pdfDoc = await loadingTask.promise;
    this.pages = this.pdfDoc.numPages;
    
    // 渲染每一页
    for (let pageNum = 1; pageNum <= this.pages; pageNum++) {
      const page = await this.pdfDoc.getPage(pageNum);
      const canvas = document.getElementById(`canvas-${pageNum}`);
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      page.render({
        canvasContext: canvas.getContext('2d'),
        viewport
      });
    }
  }
}
</script>

注意：

• 需添加 pdfjs-dist 依赖：npm install pdfjs-dist

• 大文件可能性能较差，建议分页加载。