uniapp如何使用pdf.js实现PDF预览功能

在uniapp中如何使用pdf.js实现PDF预览功能？需要引入pdf.js的哪个版本，具体步骤是什么？如何解决跨域问题和性能优化？有没有完整的示例代码可以参考？

2 回复

在uniapp中使用pdf.js预览PDF，需将pdf.js库文件放入static目录。通过web-view组件加载本地HTML页面，该页面引入pdf.js并处理PDF渲染。注意跨域问题，建议将PDF文件放在本地或配置服务器允许跨域。


在 UniApp 中使用 pdf.js 实现 PDF 预览功能，可以通过 WebView 组件加载本地或远程的 PDF 文件。以下是详细步骤和示例代码：

步骤说明：

  1. 下载 pdf.js
    从 pdf.js 官网 下载稳定版本（建议使用 prebuilt 版本），解压后放入 UniApp 项目的 static 目录下（例如 static/pdfjs/）。

  2. 准备 PDF 文件
    将 PDF 文件放在 static 目录（例如 static/demo.pdf）或使用远程 URL。

  3. 创建预览页面
    使用 web-view 组件加载 pdf.js 的查看器页面，并传递 PDF 文件路径。

示例代码：

  1. 在页面中配置 web-view（例如 preview.vue）：
<template>
  <view>
    <web-view :src="pdfUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 本地 PDF 文件路径（需放在 static 目录）
      pdfUrl: `/static/pdfjs/web/viewer.html?file=${encodeURIComponent('/static/demo.pdf')}`
      // 或远程 PDF URL
      // pdfUrl: `/static/pdfjs/web/viewer.html?file=${encodeURIComponent('https://example.com/doc.pdf')}`
    };
  }
};
</script>
  1. 注意事项：
    • 路径问题：确保 viewer.html 和 PDF 文件的路径正确。本地文件需使用绝对路径（以 /static/ 开头）。
    • 跨域限制：远程 PDF 需目标服务器允许跨域访问，否则可能加载失败。
    • H5 限制：在 H5 平台，部分浏览器可能拦截非同一域的 PDF，建议测试兼容性。
    • 路径编码：使用 encodeURIComponent 对文件路径编码，避免特殊字符导致问题。

替代方案（纯 H5）：

如果仅需在 H5 端使用，可直接用 iframe 加载在线 PDF：

<template>
  <view>
    <iframe v-if="isH5" :src="'https://example.com/doc.pdf'" width="100%" height="600px"></iframe>
  </view>
</template>

总结：

通过 web-view 加载 pdf.js 是实现跨平台 PDF 预览的可靠方法，注意路径和跨域问题即可。

回到顶部