PDF搜索优化
登录
标签搜索
侧边栏壁纸
博主昵称
何瑜明

  • 累计撰写 103 篇文章
  • 累计收到 153 条评论
java基础 JAVA

PDF搜索优化

wehg489
wehg489
2025-04-26 / 0 评论 / 4 阅读 / 正在检测是否收录... 
<body>
    <div class="container">
        <h1>PDF搜索</h1>
        
        <div class="control-panel">
            <input type="text" id="searchInput" placeholder="输入关键词搜索...">
        </div>
        
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <div class="status-area" id="status">
            准备就绪，请输入关键词搜索PDF文件
        </div>
        
        <div id="results">
            <div class="no-results">没有找到PDF文件</div>
        </div>
        
        <div id="pdfPreview">
            <div class="preview-header">
                <h3 id="previewTitle"></h3>
                <button id="closePreview">&times;</button>
            </div>
            <iframe id="pdfViewer"></iframe>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchInput');
            const resultsDiv = document.getElementById('results');
            const statusDiv = document.getElementById('status');
            const progressBar = document.getElementById('progressBar');
            const pdfPreview = document.getElementById('pdfPreview');
            const previewTitle = document.getElementById('previewTitle');
            const pdfViewer = document.getElementById('pdfViewer');
            const closePreview = document.getElementById('closePreview');
            
            // 输入框事件
            searchInput.addEventListener('input', filterFiles);

            // 关闭预览
            closePreview.addEventListener('click', () => {
                pdfPreview.style.display = 'none';
            });

            // 从后端获取PDF文件列表
            async function fetchFiles() {
                try {
                    const response = await fetch('get-pdf-files.php'); // 后端API
                    const data = await response.json();
                    if (data.success) {
                        updateUI(data.files);
                    } else {
                        statusDiv.textContent = '获取文件失败，请重试';
                    }
                } catch (error) {
                    statusDiv.textContent = '发生错误，请稍后再试';
                    console.error(error);
                }
            }

            // 过滤文件
            function filterFiles() {
                const searchTerm = searchInput.value.trim().toLowerCase();
                if (searchTerm === '') {
                    statusDiv.textContent = '请输入关键词搜索';
                    return;
                }
                fetchFiles();
            }


            function updateUI(files) {
                const filteredFiles = files.filter(file => file.name.toLowerCase().includes(searchInput.value.trim().toLowerCase()));
                
                if (filteredFiles.length === 0) {
                    resultsDiv.innerHTML = '<div class="no-results">没有找到匹配的PDF文件</div>';
                    return;
                }

                const fileList = document.createElement('ul');
                fileList.className = 'file-list';
                
                filteredFiles.forEach(file => {
                    const fileItem = document.createElement('li');
                    fileItem.className = 'file-item';
                    fileItem.innerHTML = `
                        <div class="file-info">
                            <div class="file-name">${file.name}</div>
                            <div class="file-path">${file.path}</div>
                        </div>
                        <div class="file-size">${formatFileSize(file.size)}</div>
                    `;
                    
                    fileItem.addEventListener('click', () => previewPDF(file));
                    fileList.appendChild(fileItem);
                });
                
                resultsDiv.innerHTML = '';
                resultsDiv.appendChild(fileList);
            }

            // 预览PDF文件
            function previewPDF(file) {
                previewTitle.textContent = file.name;
                pdfViewer.src = file.url; // 预览链接
                pdfPreview.style.display = 'block';
            }

            // 格式化文件大小
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const units = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(1024));
                return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${units[i]}`;
            }

            // 启动时获取文件
            fetchFiles();
        });
    </script>
</body>
<body>
<div class="container">
        <h1>PDF搜索</h1>
        
        <div class="control-panel">
            <button id="selectFolderBtn" class="btn">选择文件夹</button>
            <input type="file" id="folderInput" webkitdirectory directory multiple hidden>
            <button id="importJsonBtn" class="btn">导入JSON</button>
            <button id="exportJsonBtn" class="btn">导出为JSON</button>
            <input type="file" id="jsonInput" accept=".json" hidden>
            <input type="text" id="searchInput" placeholder="输入至少3个字符搜索..." disabled>
        </div>

        <div class="status-area" id="status">
            准备就绪，请选择包含PDF的文件夹或导入JSON
        </div>

        <div id="results">
            <div class="no-results">没有找到PDF文件</div>
        </div>

        <div id="pdfPreview">
            <div class="preview-header">
                <h3 id="previewTitle"></h3>
                <button id="closePreview">&times;</button>
            </div>
            <iframe id="pdfViewer"></iframe>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectFolderBtn = document.getElementById('selectFolderBtn');
        const folderInput = document.getElementById('folderInput');
        const searchInput = document.getElementById('searchInput');
        const resultsDiv = document.getElementById('results');
        const statusDiv = document.getElementById('status');
        const pdfPreview = document.getElementById('pdfPreview');
        const previewTitle = document.getElementById('previewTitle');
        const pdfViewer = document.getElementById('pdfViewer');
        const closePreview = document.getElementById('closePreview');

        let currentPDFFiles = [];
        let searchTimeout = null;
        
         // 新增JSON文件input
        const jsonInput = document.getElementById('jsonInput');

        // 尝试加载同路径的pdf_data.json
        fetch('pdf_data.json')
            .then(response => response.json())
            .then(data => {
                currentPDFFiles = data;
                statusDiv.textContent = `已从JSON加载 ${data.length} 个PDF记录`;
                searchInput.disabled = false;
                displayFiles(data);
            })
            .catch(() => {
                statusDiv.textContent = '本地未找到pdf_data.json，请选择文件夹或导入JSON';
            });
         // 导出为JSON
        function exportToJSON() {
            if (currentPDFFiles.length === 0) {
                statusDiv.textContent = '没有数据可以导出';
                return;
            }
            
            const exportData = currentPDFFiles.map(file => ({
                name: file.name,
                path: file.path,
                object: file.object,
            }));

            const dataStr = JSON.stringify(exportData, null, 2);
            const blob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'pdf_export.json';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // 导入JSON处理
        function handleJsonImport(event) {
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = JSON.parse(e.target.result);
                    currentPDFFiles = data;
                    statusDiv.textContent = `已从JSON导入 ${data.length} 个PDF记录`;
                    searchInput.disabled = false;
                    displayFiles(data);
                } catch (error) {
                    statusDiv.textContent = 'JSON文件格式错误';
                }
            };
            reader.readAsText(file);
        }

        // 修改预览函数处理缺少文件对象的情况
        function previewPDF(file) {
            if (!file.fileObject) {
                statusDiv.textContent = '请重新选择文件夹以激活预览功能';
                return;
            }
            
            previewTitle.textContent = file.name;
            pdfViewer.src = createObjectURL(file.fileObject);
           
            pdfPreview.style.display = 'block';
        }


        // 显示文件列表（最多显示10条）
        function displayFiles(files) {
            if (files.length === 0) {
                resultsDiv.innerHTML = '<div class="no-results">没有找到匹配的PDF文件</div>';
                return;
            }

            const displayCount = Math.min(files.length, 10); // 最多显示10条
            statusDiv.textContent = `找到 ${files.length} 个PDF，显示前 ${displayCount} 个`;

            const fileList = document.createElement('ul');
            fileList.className = 'file-list';

            files.slice(0, 10).forEach(file => {
                const fileItem = document.createElement('li');
                fileItem.className = 'file-item';
                fileItem.innerHTML = `
                    <div class="file-info">
                        <div class="file-name">${file.name}</div>
                        <div class="file-path">${file.path}</div>
                        
                    </div>
                `;
                
                fileItem.addEventListener('click', () => previewPDF(file));
                fileList.appendChild(fileItem);
            });

            resultsDiv.innerHTML = '';
            resultsDiv.appendChild(fileList);
        }

        // 预览PDF文件
        function previewPDF(file) {
            previewTitle.textContent = file.name;
            pdfViewer.src = URL.createObjectURL(file.fileObject);
            pdfPreview.style.display = 'block';
            console.log('路径',pdfViewer.src);
        }

        // 重置状态
        function resetState() {
            currentPDFFiles = [];
            searchInput.value = '';
            searchInput.disabled = true;
            resultsDiv.innerHTML = '<div class="no-results">没有找到PDF文件</div>';
            statusDiv.textContent = '准备就绪，请选择包含PDF的文件夹';
        }

        // 处理文件夹选择
        function handleFolderSelection(event) {
            const files = Array.from(event.target.files)
                .filter(file => file.name.toLowerCase().endsWith('.pdf'))
                .map(file => ({
                    name: file.name,
                    path: file.webkitRelativePath || file.name,
                    
                    fileObject: file
                }));

            currentPDFFiles = files;
            
            if (files.length > 0) {
                statusDiv.textContent = `已加载 ${files.length} 个PDF文件`;
                searchInput.disabled = false;
                displayFiles(files);
            } else {
                statusDiv.textContent = '选择的文件夹中没有PDF文件';
                searchInput.disabled = true;
            }
        }

        // 处理搜索输入（至少3个字符才搜索）
        function handleSearchInput() {
            clearTimeout(searchTimeout);
            
            const query = searchInput.value.trim().toLowerCase();
            if (query.length < 3) {
                displayFiles(currentPDFFiles);
                return;
            }
            
            searchTimeout = setTimeout(() => {
                const filtered = currentPDFFiles.filter(file => 
                    file.name.toLowerCase().includes(query) || 
                    file.path.toLowerCase().includes(query)
                   
                );
                displayFiles(filtered);
            }, 300);
        }

        // 事件监听
         document.getElementById('exportJsonBtn').addEventListener('click', exportToJSON);
        document.getElementById('importJsonBtn').addEventListener('click', () => jsonInput.click());
        jsonInput.addEventListener('change', handleJsonImport);
        selectFolderBtn.addEventListener('click', () => folderInput.click());
        folderInput.addEventListener('change', handleFolderSelection);
        searchInput.addEventListener('input', handleSearchInput);
        closePreview.addEventListener('click', () => {
            pdfPreview.style.display = 'none';
            URL.revokeObjectURL(pdfViewer.src); // 释放内存
        });

        // 初始化
        resetState();
    });
    </script>
</body>
<body>
<div class="container">
    <h1>质量文件记录</h1>
    
    <div class="control-panel">
        <button id="uploadExcelBtn" class="btn">上传Excel文件</button>
        <input type="file" id="excelInput" accept=".xlsx,.xls" hidden>
        <input type="text" id="searchInput" placeholder="输入至少3个字符搜索...">
    </div>

    <div class="status-area" id="status">
        正在加载up文件夹中的文件...
    </div>

    <div id="results">
        <div class="no-results">没有找到文件</div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadExcelBtn = document.getElementById('uploadExcelBtn');
    const excelInput = document.getElementById('excelInput');
    const searchInput = document.getElementById('searchInput');
    const resultsDiv = document.getElementById('results');
    const statusDiv = document.getElementById('status');

    let currentFiles = [];
    let searchTimeout = null;
    
    // 从up文件夹加载文件
    function loadFilesFromUpFolder() {
        fetch('up/')
            .then(response => response.text())
            .then(text => {
                // 解析HTML获取文件列表
                const parser = new DOMParser();
                const htmlDoc = parser.parseFromString(text, 'text/html');
                const links = htmlDoc.querySelectorAll('a[href]');
                
                currentFiles = Array.from(links)
                    .filter(link => !link.href.endsWith('/'))
                    .map(link => ({
                        name: link.href.split('/').pop(),
                        url: link.href
                    }));
                
                if (currentFiles.length > 0) {
                    statusDiv.textContent = `找到 ${currentFiles.length} 个文件`;
                    displayFiles(currentFiles);
                } else {
                    statusDiv.textContent = 'up文件夹中没有文件';
                    resultsDiv.innerHTML = '<div class="no-results">up文件夹中没有文件</div>';
                }
            })
            .catch(error => {
                statusDiv.textContent = '无法访问up文件夹: ' + error.message;
                resultsDiv.innerHTML = '<div class="no-results">无法访问up文件夹</div>';
            });
    }

    // 处理Excel上传
    function handleExcelUpload(event) {
  const file = event.target.files[0];
  if (!file) return;

  // 1. 文件类型校验
  if (!['.xlsx', '.xls'].some(ext => file.name.endsWith(ext))) {
    statusDiv.textContent = '仅支持.xlsx/.xls格式文件';
    return;
  }

  // 2. 添加加载状态
  statusDiv.textContent = '解析中...';
  
  // 3. 使用FileReader读取文件内容
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      // 4. 解析Excel数据（需安装xlsx库）
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(firstSheet);

      // 5. 触发回调传递解析结果
      if (typeof this.onExcelParsed === 'function') {
        this.onExcelParsed({
          raw: file,
          parsedData: jsonData,
          fileName: file.name
        });
      }

      // 6. 更新界面状态
      statusDiv.textContent = `解析完成: ${file.name}`;
      currentFiles.push({
        name: file.name,
        url: URL.createObjectURL(file),
        data: jsonData // 存储解析结果
      });
      displayFiles(currentFiles);

    } catch (error) {
      statusDiv.textContent = `解析失败: ${error.message}`;
    }
  };

  // 7. 错误处理
  reader.onerror = () => {
    statusDiv.textContent = '文件读取失败';
  };

  reader.readAsArrayBuffer(file);
}


    // 显示文件列表
    function displayFiles(files) {
        if (files.length === 0) {
            resultsDiv.innerHTML = '<div class="no-results">没有找到匹配的文件</div>';
            return;
        }

        const fileList = document.createElement('ul');
        fileList.className = 'file-list';

        files.forEach(file => {
            const fileItem = document.createElement('li');
            fileItem.className = 'file-item';
            fileItem.innerHTML = `
                <div class="file-info">
                    <div class="file-name">${file.name}</div>
                    下载
                </div>
            `;
            fileList.appendChild(fileItem);
        });

        resultsDiv.innerHTML = '';
        resultsDiv.appendChild(fileList);
    }

    // 处理搜索输入
    function handleSearchInput() {
        clearTimeout(searchTimeout);
        
        const query = searchInput.value.trim().toLowerCase();
        if (query.length < 3) {
            displayFiles(currentFiles);
            return;
        }
        
        searchTimeout = setTimeout(() => {
            const filtered = currentFiles.filter(file => 
                file.name.toLowerCase().includes(query)
            );
            displayFiles(filtered);
        }, 300);
    }

    // 事件监听
    uploadExcelBtn.addEventListener('click', () => excelInput.click());
    excelInput.addEventListener('change', handleExcelUpload);
    searchInput.addEventListener('input', handleSearchInput);

    // 初始化 - 自动加载up文件夹
    loadFilesFromUpFolder();
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</body>
0
暂无标签
版权属于： wehg489
本文链接： https://blog.anhuihym.top/index.php/archives/162/
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

评论 (0)

取消
歌曲封面
0:00