如何在html中创建pdf查看器？

Question

我只需要一个页面来在 Firefox 浏览器中查看 pdf 文件。这些文件将位于我选择的任何文件夹中。有点像 Firefox 已经做的事情（如所附图片），但喜欢这样做：当选择文件时，pdf 页面显示在右侧。抱歉，如果问得太多了，但我在网上找不到任何东西，而且我刚刚开始编码，我不知道该怎么做......

我尝试用下面的代码来做到这一点...它不起作用...



<!DOCTYPE html>

   <html lang="pt-br">

   <head>

       <meta charset="UTF-8">

       <meta name="viewport" content="width=device-width, initial-scale=1.0">

       <title>Visualizador PDF</title>

       <style>

           css

   body, html {

       height: 100%;

       margin: 0;

       font-family: Arial, sans-serif;

   }

   .container {

       display: flex;

       height: 100%;

   }

   .lista {

       width: 30%;

       overflow-y: auto;

       border-right: 1px solid #ccc;

       padding: 10px;

   }

   .visualizador {

       width: 70%;

       padding: 10px;

   }

       </style>

   </head>

   <body>

       ok

       <div class="container">

       <div class="lista">

           <ul id="listaArquivos">

               

               <script>javascript

document.addEventListener('DOMContentLoaded', function() {

    const listaArquivos = document.getElementById('listaArquivos');

    const pdfViewer = document.getElementById('pdfViewer');

    // Ajuste o caminho para a pasta pdfs localizada na sua área de trabalho

    const diretorio = "file:///C:/Users/F170593/Desktop/pdfs/"; // Atualize com seu nome de usuário

    fetch(diretorio).then(response => response.text()).then(text => {

        const parser = new DOMParser();

        const xmlDoc = parser.parseFromString(text, "text/html");

        const items = xmlDoc.querySelectorAll('a');  // Use querySelectorAll para obter todos os links

        items.forEach(item => {

            const nomeArquivo = item.textContent;

            if (nomeArquivo.endsWith('.pdf')) {

                const li = document.createElement('li');

                li.textContent = nomeArquivo;

                li.addEventListener('click', function() {

                    pdfViewer.src = diretorio + nomeArquivo;

                });

                listaArquivos.appendChild(li);

            }

        });

    });

});

</script>

           </ul>

       </div>

       <div class="visualizador">

           <iframe id="pdfViewer" width="100%" height="100%" src="" frameborder="0"></iframe>

       </div>

   </div>

   </body>

   </html>

Answer 1

在 Windows 中访问文件时，MS Edge 比其他浏览器具有系统访问优势，因为您可以将屏幕拆分并一分为二打开系统文件夹，并使用另一半查看 ePub 或 PDF 等文件。

我正在查看#47，您可以看到我在中间拖动 48.pdf 来查看下一个。

您可以从快捷方式在给定文件夹中启动该进程

"C:\Program Files\Microsoft\Edge\Application\msedge.exe" %userprofile%/documents

或者更简单地将起始文件夹拖到 MS Edge 中

如何在html中创建pdf查看器？

问题描述投票：0回答：1

1个回答

最新问题

如何在html中创建pdf查看器？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1