实现预览功能的核心是借助第三方的PDF.js库。先将PDF.js库引入到项目中，然后编写JavaScript代码来实现加载和预览PDF文件。在Layui的相关事件或自定义函数中编写如下代码逻辑：通过JavaScript获取到之前定义的预览容器元素，使用PDF.js的API来加载指定的PDF文件。例如：

layui.use(['layer'], function () {
    var layer = layui.layer;
    var pdfUrl = 'your-pdf-url.pdf';
    pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
        pdf.getPage(1).then(function (page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale });
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
            document.getElementById('pdf-preview').appendChild(canvas);
        });
    }).catch(function (reason) {
        layer.msg('加载PDF文件失败：' + reason);
    });
});

这段代码首先使用layui的layer模块来处理可能的提示信息。接着获取指定的PDF文件，获取第一页并设置缩放比例，创建一个画布用于渲染PDF内容，最后将渲染好的画布添加到之前定义的预览容器中。如果加载过程中出现错误，会通过layer模块弹出提示信息。

通过上述步骤，基于Layui开发的应用就可以实现PDF文件的在线预览功能。开发者可以根据实际需求进一步优化样式和功能，例如添加多页预览、缩放控制等功能，为用户提供更加完善的PDF预览体验。