layui+jsp框架下实现对pdf或图片预览功能

最新推荐文章于 2024-08-22 11:50:42 发布

懒人w

最新推荐文章于 2024-08-22 11:50:42 发布

阅读量500

点赞数 3

分类专栏：工作记录文章标签： layui pdf

本文链接：https://blog.csdn.net/weixin_45049746/article/details/140828170

版权

工作记录专栏收录该内容

33 篇文章 0 订阅

订阅专栏

功能

对上传的文件实现预览功能，文件类型为图片或pdf。

效果展示

PDF预览效果展示

图片预览效果展示

实现

引入 jQuery：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

引入 Bootstrap 的 CSS 和 JavaScript：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

确保引入顺序正确：
jQuery 应在 Bootstrap 之前加载。

完整的 HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

 <!-- 这是一个模板，用于生成缩略图。`{{ d.path }}` 是数据占位符，用于插入图像路径。当点击图像时，会调用 `previewImg` 函数。-->
    <script type="text/html" id="pic">
        <img src="{{ d.path }}" onclick="previewImg(this)">
    </script>

    <script>
        function previewImg(obj) {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
            var data = obj.src;
            var fileExtension = data.split('.').pop().toLowerCase();
            if (fileExtension === 'pdf') {
                showPdfPreview(data);
            } else {
                showImagePreview(data);
            }
        }
        function showPdfPreview(pdfUrl) {  
            var modalHtml = `
                <div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="pdfModalLabel">PDF 预览</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <canvas id="pdf-canvas" style="width: 100%; height: auto;"></canvas>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>`;
            $(document.body).append(modalHtml);
            var loadingTask = pdfjsLib.getDocument(pdfUrl);
            loadingTask.promise.then(function(pdf) {
                return pdf.getPage(1).then(function(page) {
                    var scale = 1.5;
                    var viewport = page.getViewport({ scale: scale });
                    var canvas = document.getElementById('pdf-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                    $('#pdfModal').modal('show');
                });
            });
            $('#pdfModal').on('hidden.bs.modal', function() {
                $(this).remove();
            });
        }
        function showImagePreview(imageUrl) {
            var img = new Image();
            img.src = imageUrl;
            img.onload = function() {
                var imgHtml = `<img src="${imageUrl}" style="max-width: 100%; height: auto;" />`;
                layer.open({
                    type: 1,
                    shade: 0.8,
                    offset: 'auto',
                    area: ['1200px', '600px'],
                    shadeClose: true,
                    scrollbar: false,
                    title: "图片预览",
                    btn: ['打印'],
                    content: imgHtml,
                    yes: function(index) {
                        layer.close(index);
                        printThisWindow(imageUrl);
                    },
                });
            };
        }
        function printThisWindow(url) {
            var printWindow = window.open(url, '_blank');
            printWindow.print();
        }
    </script>
</body>
</html>