跨域通信实战：在Vue2/UniApp中利用iframe嵌入与操控本地PDF查看器

1. 为什么需要iframe嵌入PDF查看器？

在Vue2或UniApp项目中直接处理PDF文件是个常见需求，但浏览器原生对PDF的支持有限。你可能遇到过这些问题：无法自定义UI、无法获取阅读进度、难以实现复杂交互。这时候iframe就派上用场了。

我去年做过一个电子合同签署系统，客户要求能高亮批注PDF且实时同步签署位置。试过直接用pdf.js，发现UI定制成本太高，最终选择将整个PDF查看器用iframe嵌入，主应用只负责业务逻辑，完美解耦。

iframe方案有三大优势：

• 隔离环境：PDF渲染的复杂逻辑完全封装在iframe内
• 复用成熟方案：直接使用pdf.js等现成查看器
• 安全沙箱：避免PDF操作影响主应用稳定性

2. 环境准备与基础集成

2.1 项目结构搭建

无论是Vue2还是UniApp，核心思路都是将PDF查看器作为静态资源部署。这是我的推荐结构：

code复制/public
  /static
    /pdfjs
      viewer.html  # PDF查看器入口
      build/      # pdf.js官方库
      web/        # 查看器UI资源
/src
  /components
    PDFViewer.vue # 我们的封装组件

在vue-cli项目中，public目录下的文件会原样复制到dist。UniApp稍微特殊，需要放在src/static（HBuilderX创建的项目）或static目录（cli创建的项目）。

2.2 查看器配置要点

直接使用pdf.js官方demo的viewer.html时，要注意三个关键修改：

1. worker路径修正：

javascript复制// 在viewer.html的初始化脚本中修改
pdfjsLib.GlobalWorkerOptions.workerSrc = 
  window.location.pathname.includes('uniapp') 
    ? '../../static/pdfjs/build/pdf.worker.mjs' 
    : '../build/pdf.worker.mjs';

2. 跨域通信准备：

html复制<!-- 在head标签内提前声明消息监听 -->
<script>
  window.MESSAGE_HANDLERS = {};
  window.addEventListener("message", (event) => {
    const { cmd, handler } = event.data;
    if(handler && window.MESSAGE_HANDLERS[handler]) {
      window.MESSAGE_HANDLERS[handler](event.data);
    }
  });
</script>

3. 响应式布局适配：

css复制/* 在viewer.css末尾添加 */
@media screen and