pdf阅读器

最新推荐文章于 2024-07-14 14:48:22 发布

IT小猫咪

最新推荐文章于 2024-07-14 14:48:22 发布

阅读量41

点赞数

文章标签： pdf javascript 前端 html

本文链接：https://blog.csdn.net/qq_42249638/article/details/131946566

版权

<!DOCTYPE html>
<html>
<head>
    <title>文件选择示例</title>
    <style>
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            padding: 20px;
        }

        /* 容器样式 */
        .modal .content-container {
            box-sizing: border-box;
            height: calc(100% - 40px);
            overflow: auto;
            padding-right: 10px; /* 修改这里的值来调整下边栏的宽度 */
        }
    </style>

    <script>
        // 显示弹窗
        function openModal() {
            var modal = document.getElementById("myModal");
            modal.style.display = "block";
        }

        // 关闭弹窗
        function closeModal() {
            var modal = document.getElementById("myModal");
            modal.style.display = "none";
        }

        // 处理文件选择事件
        function handleFileSelect(event) {
            var file = event.target.files[0];
            var reader = new FileReader();

            reader.onload = function (e) {
                var pdfViewer = document.getElementById("pdfViewer");
                pdfViewer.src = e.target.result;
            };

            reader.readAsDataURL(file);

            // 显示文件名
            var fileNameElement = document.getElementById("fileName");
            fileNameElement.textContent = file.name;
        }

        // 触发文件选择事件
        function triggerFileSelect() {
            var fileInput = document.getElementById("fileInput");
            fileInput.click();
        }
    </script>
</head>
<body onload="openModal()">
<div id="myModal" class="modal">
    <div class="content-container">
        <button onclick="triggerFileSelect()">选择文件</button>
        <span id="fileName"></span> <!-- 显示文件名 -->
        <input id="fileInput" type="file" style="display: none;" onchange="handleFileSelect(event)">
        <iframe id="pdfViewer" src="" width="100%" height="100%"></iframe>
    </div>
</div>
</body>
</html>