5分钟实现企业级PDF预览：Layui文档查看功能开发指南

你是否还在为Web应用中的PDF预览功能开发而烦恼？集成第三方插件太臃肿？原生实现兼容性差？本文将带你基于Layui前端框架，用不到100行代码打造一个轻量级、高兼容性的文档预览组件，让你轻松解决各类办公系统中的文档查看需求。

开发痛点与解决方案

在企业级应用开发中，文档预览是一个高频需求。传统方案往往存在以下问题：

• 直接使用浏览器内置PDF查看器样式与系统脱节
• 第三方PDF.js等库体积庞大（超过300KB）
• 缺乏统一的权限控制和操作交互

Layui框架提供的Layer弹层组件（src/modules/layer.js）和Iframe嵌入技术，为我们提供了轻量级解决方案。通过结合这两项技术，我们可以实现：

• 保持系统UI一致性的预览窗口
• 仅需加载Layer组件（约50KB）
• 支持权限控制、水印添加等扩展功能

实现步骤

1. 引入Layui资源

首先确保项目中已引入Layui框架，推荐使用国内CDN加速地址：

<!-- 引入Layui CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.6/css/layui.css">
<!-- 引入Layui JS -->
<script src="https://cdn.staticfile.org/layui/2.9.6/layui.js"></script>

2. 创建预览按钮

在页面中添加触发预览的按钮元素，使用Layui的按钮样式：

<button class="layui-btn layui-btn-primary" id="previewBtn">
  <i class="layui-icon layui-icon-file-pdf"></i> 预览PDF文档
</button>

3. 编写预览功能代码

通过Layer的iframe类型弹层实现PDF预览，核心代码如下：

layui.use('layer', function(){
  var layer = layui.layer;
  
  // 绑定按钮点击事件
  document.getElementById('previewBtn').addEventListener('click', function(){
    // 打开PDF预览弹层
    layer.open({
      type: 2,  // iframe类型
      title: '合同文档预览',
      area: ['80%', '90%'],  // 宽高占比
      maxmin: true,  // 允许最大化
      content: 'https://example.com/contract.pdf',  // PDF文件URL
      id: 'pdfPreviewLayer',  // 唯一标识，防止重复打开
      shade: 0.3,  // 遮罩透明度
      success: function(layero, index){
        // 成功打开后的回调
        console.log('PDF预览窗口已打开');
      }
    });
  });
});

4. 添加扩展功能

权限控制

在服务器端对PDF文件URL添加权限验证参数：

// 生成带权限验证的URL
var pdfUrl = 'https://example.com/contract.pdf?token=' + getAuthToken();

水印添加

通过Layer弹层的success回调，在预览窗口添加水印：

success: function(layero, index){
  // 创建水印元素
  var watermark = document.createElement('div');
  watermark.style.position = 'absolute';
  watermark.style.top = '50%';
  watermark.style.left = '50%';
  watermark.style.transform = 'translate(-50%, -50%)';
  watermark.style.color = 'rgba(180, 180, 180, 0.3)';
  watermark.style.fontSize = '40px';
  watermark.style.fontWeight = 'bold';
  watermark.style.pointerEvents = 'none';
  watermark.innerHTML = '内部文档 · 请勿外传';
  
  // 添加到弹层
  layero.append(watermark);
}

实际效果展示

预览窗口效果

使用上述代码实现的PDF预览窗口效果如下：

注：实际项目中可通过修改Layer弹层的样式参数（docs/layer/detail/options.md）调整窗口外观

响应式适配

Layer弹层会自动适应不同屏幕尺寸，在移动设备上同样有良好表现：

• 桌面端：宽80% × 高90%
• 平板端：宽90% × 高85%
• 手机端：全屏显示并隐藏标题栏

高级应用场景

多文档切换预览

通过维护文档列表，实现多个PDF文件的连续预览：

var docs = [
  {name: '合同1', url: 'doc1.pdf'},
  {name: '合同2', url: 'doc2.pdf'}
];
var currentIndex = 0;

// 切换文档函数
function switchDoc(next) {
  currentIndex = next ? 
    (currentIndex + 1) % docs.length : 
    (currentIndex - 1 + docs.length) % docs.length;
  
  // 重载iframe内容
  var iframe = layer.getChildFrame('body', 'pdfPreviewLayer');
  iframe.attr('src', docs[currentIndex].url);
  layer.title(docs[currentIndex].name, 'pdfPreviewLayer');
}

结合Layui表格使用

在数据表格中实现每行记录的文档预览功能：

layui.use(['table', 'layer'], function(){
  var table = layui.table;
  
  table.render({
    elem: '#docTable',
    url: '/api/docList',
    cols: [[
      {field: 'name', title: '文档名称'},
      {field: 'date', title: '上传日期'},
      {title: '操作', toolbar: '#previewBar'}
    ]]
  });
  
  // 监听工具条点击
  table.on('tool(docTable)', function(obj){
    if(obj.event === 'preview'){
      // 打开预览窗口
      layer.open({
        type: 2,
        content: obj.data.url,
        // 其他配置...
      });
    }
  });
});

性能优化建议

1. 预加载Layer组件：在页面初始化时提前加载Layer，减少点击延迟

// 提前加载Layer
layui.use('layer', function(){});

2. 限制预览窗口大小：根据PDF文件大小动态调整窗口尺寸

3. 添加加载动画：在PDF加载完成前显示加载状态

// 打开加载层
var loadIndex = layer.load(2);

// PDF加载完成后关闭
layer.iframeAuto('pdfPreviewLayer', function(){
  layer.close(loadIndex);
});

总结与扩展

通过本文介绍的方法，我们基于Layui的Layer组件实现了轻量级PDF预览功能。该方案具有以下优势：

• 轻量级：仅依赖Layer组件，无需额外引入大型库
• 易扩展：支持水印、权限控制等企业级需求
• 兼容性好：支持所有现代浏览器及IE10+

官方文档中还有更多Layer组件的高级用法（docs/layer/index.md），你可以进一步实现：

• 预览窗口的自定义按钮
• 预览内容的打印功能
• 电子签章等高级特性

希望本文能帮助你快速实现企业级文档预览功能。如果觉得有用，请点赞收藏，并关注我们获取更多Layui实战技巧！