本文详细解析前端在线预览PDF文件的三种主流方案：利用微软Office Online接口结合iframe、直接通过window.open打开链接以及基于PDF.js库的本地部署。重点分析各方案在PC与移动端的表现差异，特别是安卓端直接下载与iOS端在线打开的兼容性问题。同时提供PDF.js在Nuxt3/Vue3项目中的具体配置步骤，包括处理跨域报错、调整移动端默认缩放比例及解决版本不匹配错误的实战技巧。
背景
在项目开发过程中，经常遇到需要在线展示公司内部PDF文档的需求，且要求该功能需同时兼容PC端与移动端设备访问。
实现方式
一、利用微软在线预览接口结合iframe
其中 reviewUrl 变量代表待预览的PDF文件地址。此方法的优势在于不仅支持PDF，还能直接预览Word、PPT及Excel等Office格式文件。
<iframe :src="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(reviewUrl)" frameborder="0" title="review" width="100%" height="100%"></iframe>
该方案的局限性：
- 受网络环境影响，存在一定概率无法加载或需反复刷新才能打开的情况，用户体验不够稳定。
- 在安卓真机环境中，点击链接往往直接触发PDF文件下载，无法实现预期的在线预览效果，难以满足业务需求。
二、直接使用 window.open 打开文档链接
此方式在iOS系统浏览器中表现良好，可直接在当前网页内打开文档；但在安卓端同样存在直接下载文件而非在线预览的问题。
三、基于 PDF.js 库实现
PDF.js 官方资源地址
建议选用较低版本，例如 v2.7.570。过高版本可能会因PDF文件版本过低而引发不匹配报错。经测试，从v4降级至v3再至该版本，稳定性最佳，能覆盖98%以上的文件预览场景。
1. 从官网下载所需资源，核心文件结构如下：
将 build 和 web 两个文件夹整体迁移至项目的 public 目录下。若项目基于 Nuxt3 构建，路径一致；若是 Vite 创建的 Vue3 项目，同样放置于 public 文件夹中。
2. 创建 Preview.vue 组件用于PDF预览。若业务场景为弹窗查看，可参考以下代码；若需新页面打开，请确保传递对应链接。代码如下：
<template>
<el-dialog
title=""
class="preview-dialog"
v-model="dialogVisible"
:destroy-on-close="true"
:append-to-body="true"
:show-close="false"
@closed="handleClose"
>
<div class="close-button" @click.stop="handleClose"></div>
<iframe frameborder="0" :src="previewUrl" width="100%" height="100%"></iframe>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
interface IProps {
reviewUrl?: string;
}
const props = withDefaults(defineProps<IProps>(), {
reviewUrl: "",
});
const emit = defineEmits(["update:modelValue", "emitClosePreview"]);
const dialogVisible = ref(true);
// pdfjs用于预览的url，固定格式，会去项目中的 public 文件夹下找到 web 文件夹中的 viewer.html
const pdfjsFileUrl = '/web/viewer.html?file=';
const previewUrl = ref("");
const handleClose = () => {
emit("emitClosePreview");
};
watch(
() => props.reviewUrl,
newReviewUrl => {
// 如果你预览的是本地的 pdf，那么建议你把 pdf 文件也放到 public 中，这样不会被编译
previewUrl.value = `${pdfjsFileUrl}${encodeURIComponent(newReviewUrl)}`;
},
{
immediate: true,
}
);
</script>
// 弹框的样式我就不贴了
3. 进入 public/web 目录找到 viewer.js 文件，定位并注释 file origin does not match viewer's 所在行。此举旨在消除因源地址不匹配导致的跨域报错。
4. 在移动端设备上，默认预览效果可能导致PDF内容过小，影响阅读体验。尽管支持手动放大，但可通过修改 viewer.js 中的初始配置优化显示。搜索 const DEFAULT_SCALE_VALUE，将默认值替换为 'page-width'，即可使移动端预览内容自动适配设备宽度。
该配置涉及一个 switch 代码块，可选设置值如下：
开发者可根据实际需求自定义初始值，以达到理想的初始化展示效果。
注意事项：必须确保 pdfjs 版本号一致，否则可能触发如下报错：
Warning: UnknownErrorException: The API version "3.11.174" does not match the Worker version "3.6.172".
可通过执行 console.log("pdf-js版本", pdfjs.version) 来打印并核对当前版本号。
总结
至此，关于前端在线预览PDF文件的三种实现方式已介绍完毕。如需了解更多前端在线预览PDF相关内容，欢迎查阅本站过往文章或继续浏览后续教程，感谢支持！