zip-html-preview
項目介紹
這是一個基于 Spring Boot 開發的在線 ZIP 文件預覽工具,主要用于預覽 ZIP 壓縮包中的 HTML 文件及其相關資源。
主要功能
- 支持拖拽上傳或點擊選擇多個 ZIP 文件
- 自動解壓并提取 ZIP 文件中的 HTML 文件
- 在線預覽 HTML 文件及其相關的 CSS、JavaScript 和圖片等資源
- 支持多文件批量處理
技術棧
- 后端：Spring Boot 2.3.4
- 前端：HTML5 + JavaScript
- 構建工具：Maven
快速開始
環境要求
- JDK 8+
- Maven 3.x
配置說明
在 application.properties 中配置解壓文件存儲路徑:
zip.extract.path=D:/unzip
運行步驟
- 克隆項目
git clone https://gitee.com/anxwefndu/zip-html-preview.git
- 進入項目目錄
cd zip-html-preview/SpringBoot
- 編譯打包
mvn clean package
- 運行項目
java -jar target/SpringBoot-1.0-SNAPSHOT-execute.jar
- 訪問應用
打開瀏覽器訪問:http://localhost:8080
使用說明
- 打開網頁后,可以通過拖拽或點擊選擇按鈕上傳 ZIP 文件
- 支持同時選擇多個 ZIP 文件
- 上傳完成后會自動顯示可預覽的 HTML 文件列表
- 點擊文件名即可在新標簽頁中預覽對應的 HTML 文件
源碼下載
zip-html-preview
演示截圖
1.系統首頁
2.預覽壓縮包
3.預覽頁面1
4.預覽頁面2
核心源碼
SpringBoot/src/main/resources/static/index.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>zip-html-preview</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {theme: {extend: {colors: {primary: '#4F46E5',secondary: '#6366F1'},borderRadius: {'none': '0px','sm': '2px',DEFAULT: '4px','md': '8px','lg': '12px','xl': '16px','2xl': '20px','3xl': '24px','full': '9999px','button': '4px'}}}}</script><style>body::-webkit-scrollbar {width: 0.5rem;}body::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 0.5rem;}body::-webkit-scrollbar-thumb {background: #3498db;border-radius: 0.5rem;}body::-webkit-scrollbar-thumb:hover {background: #2980b9;}.drag-area {border: 2px dashed #E5E7EB;transition: all 0.3s ease;}.drag-area:hover {border-color: #4F46E5;}.file-input {display: none;}.button-hover {transition: transform 0.2s ease;}.button-hover:active {transform: translateY(2px);}</style></head><body class="bg-gray-50"><div class="w-[1200px] mx-auto"><nav class="h-16 bg-white shadow-sm flex items-center justify-between px-8"><div class="flex items-center space-x-2"><span class="text-2xl font-['Pacifico'] text-primary">logo</span><span class="text-lg font-medium">zip-html-preview</span></div><button class="w-10 h-10 rounded-button flex items-center justify-center hover:bg-gray-100 transition-colors"><i class="fas fa-sun text-gray-600"></i></button></nav><main class="px-8 py-12"><div class="max-w-3xl mx-auto"><div class="bg-white rounded-lg shadow-sm p-8"><div id="dropArea" class="drag-area rounded-lg p-12 text-center"><input type="file" id="fileInput" class="file-input" multiple accept=".zip"><div class="space-y-4"><div class="w-20 h-20 mx-auto bg-gray-50 rounded-full flex items-center justify-center"><i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i></div><div><h3 class="text-lg font-medium">拖拽文件到這里，或</h3><button class="mt-2 px-6 py-2 bg-primary text-white rounded-button hover:bg-primary/90 button-hover whitespace-nowrap">點擊選擇文件</button></div><p class="text-sm text-gray-500">支持的文件格式：ZIP</p></div></div><div id="fileList" class="hidden mt-8 space-y-4"><div class="text-lg font-medium mb-4">已選擇的文件</div><div class="space-y-3"></div><div class="flex justify-end space-x-3 mt-6"><button id="clearButton" class="px-6 py-2 text-gray-600 bg-gray-100 rounded-button hover:bg-gray-200 button-hover whitespace-nowrap">清空列表</button><button id="previewButton" class="px-6 py-2 text-white bg-primary rounded-button hover:bg-primary/90 button-hover whitespace-nowrap">預覽</button></div></div><div id="previewLinks" class="hidden mt-8 space-y-4"><div class="text-lg font-medium mb-4">可預覽的文件</div><ul class="space-y-2" id="htmlFilesList"></ul></div></div><div class="mt-12 bg-white rounded-lg shadow-sm p-8"><h2 class="text-xl font-medium mb-6">使用說明</h2><div class="space-y-4 text-gray-600"><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-check text-sm text-primary"></i></div><p>支持拖拽上傳或點擊選擇文件，可以一次選擇多個ZIP文件</p></div><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-check text-sm text-primary"></i></div><p>系統會自動解析ZIP文件中的HTML文件，并提供在線預覽功能</p></div><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-check text-sm text-primary"></i></div><p>支持預覽ZIP包中的HTML文件及其相關的CSS、JavaScript和圖片等資源</p></div><div class="flex items-start space-x-3"><div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5"><i class="fas fa-check text-sm text-primary"></i></div><p>提供文件樹視圖，方便瀏覽ZIP包中的文件結構和快速切換不同的HTML文件</p></div></div></div></div></main></div><script>const dropArea = document.getElementById('dropArea');const fileInput = document.getElementById('fileInput');const fileList = document.getElementById('fileList');const previewButton = document.getElementById('previewButton');const clearButton = document.getElementById('clearButton');const previewLinks = document.getElementById('previewLinks');const htmlFilesList = document.getElementById('htmlFilesList');// 存儲所有文件的數組let selectedFiles = [];// 點擊拖拽區域觸發文件選擇dropArea.addEventListener('click', () => {fileInput.click();});// 拖拽進入時改變樣式dropArea.addEventListener('dragover', (e) => {e.preventDefault();dropArea.classList.add('border-primary');});// 拖拽離開時恢復樣式dropArea.addEventListener('dragleave', () => {dropArea.classList.remove('border-primary');});// 拖拽放下時處理文件dropArea.addEventListener('drop', (e) => {e.preventDefault();dropArea.classList.remove('border-primary');const files = e.dataTransfer.files;handleFiles(files);});// 文件輸入框變化時處理文件fileInput.addEventListener('change', () => {const files = fileInput.files;handleFiles(files);fileInput.value = null;});// 處理文件并更新文件列表function handleFiles(files) {for (let i = 0; i < files.length; i++) {const file = files[i];if (!selectedFiles.some(f => f.name === file.name)) {selectedFiles.push(file);}}updateFileList();}// 更新文件列表 DOMfunction updateFileList() {if (selectedFiles.length > 0) {fileList.classList.remove('hidden');} else {fileList.classList.add('hidden');}const listContainer = fileList.querySelector('.space-y-3');listContainer.innerHTML = ''; // 清空舊的文件列表selectedFiles.forEach((file, index) => {const fileType = file.type || 'text/plain';const fileSize = formatFileSize(file.size);const listItem = document.createElement('div');listItem.className = 'flex items-center justify-between p-4 bg-gray-50 rounded-lg';// 左側：文件圖標和信息const leftSide = document.createElement('div');leftSide.className = 'flex items-center space-x-3';const icon = document.createElement('i');icon.className = getIconClass(fileType);icon.style.color = '#4F46E5'; // 設置顏色const fileInfo = document.createElement('div');fileInfo.innerHTML = `<div class="font-medium">${escapeHTML(file.name)}</div><div class="text-sm text-gray-500">${fileSize}</div>`;leftSide.appendChild(icon);leftSide.appendChild(fileInfo);// 右側：操作按鈕const rightSide = document.createElement('div');rightSide.className = 'flex items-center space-x-2';// 刪除按鈕const deleteButton = document.createElement('button');deleteButton.className = 'p-2 text-gray-400 hover:text-gray-600 rounded-button button-hover';deleteButton.innerHTML = '<i class="fas fa-times"></i>';deleteButton.addEventListener('click', () => removeFile(index));rightSide.appendChild(deleteButton);listItem.appendChild(leftSide);listItem.appendChild(rightSide);listContainer.appendChild(listItem);});}// 格式化文件大小function formatFileSize(size) {const units = ['B', 'KB', 'MB', 'GB'];let unitIndex = 0;while (size >= 1024 && unitIndex < units.length - 1) {size /= 1024;unitIndex++;}return `${size.toFixed(2)} ${units[unitIndex]}`;}// 獲取文件類型的圖標類名function getIconClass(type) {if (type.startsWith('image/')) {return 'fas fa-file-image text-primary w-8 h-8 flex items-center justify-center';} else if (type === 'text/plain' || type.endsWith('.md')) {return 'fas fa-file-alt text-primary w-8 h-8 flex items-center justify-center';} else {return 'fas fa-file text-primary w-8 h-8 flex items-center justify-center';}}// 移除指定索引的文件function removeFile(index) {selectedFiles.splice(index, 1);updateFileList();}// 清空所有文件document.querySelector('#fileList .px-6.py-2.text-gray-600').addEventListener('click', () => {selectedFiles = [];updateFileList();});// 轉義 HTML 特殊字符function escapeHTML(str) {return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');}// 清空所有文件clearButton.addEventListener('click', () => {selectedFiles = [];updateFileList();previewLinks.classList.add('hidden');htmlFilesList.innerHTML = '';});// 預覽按鈕點擊事件previewButton.addEventListener('click', () => {if (selectedFiles.length === 0) return;const formData = new FormData();selectedFiles.forEach(file => formData.append('file', file));fetch('/api/upload', {method: 'POST',body: formData}).then(response => response.json()).then(data => {previewLinks.classList.remove('hidden');htmlFilesList.innerHTML = '';data.forEach(htmlFile => {const listItem = document.createElement('li');listItem.className = 'flex items-center justify-between p-4 bg-gray-50 rounded-lg';const fileName = document.createElement('a');fileName.href = htmlFile.filePath;fileName.target = '_blank';fileName.className = 'text-blue-500 hover:underline';fileName.textContent = htmlFile.fileName;listItem.appendChild(fileName);htmlFilesList.appendChild(listItem);});}).catch(error => {alert('上傳失敗，請稍后再試。');console.error('Error:', error);});});</script></body></html>
SpringBoot/src/main/java/com/boot/service/ZipService.java
package com.boot.service;import com.boot.config.ZipConfig;
import com.boot.model.HtmlFile;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.charset.Charset;
import java.nio.file.*;
import java.util.ArrayList;
import java.util.List;
import java.util.zip.ZipEntry;
import java.util.zip.ZipInputStream;@Service
public class ZipService {@Autowiredprivate ZipConfig zipConfig;public List<HtmlFile> processZipFile(MultipartFile file) throws IOException {String extractDir = zipConfig.getExtract().getPath();File dir = new File(extractDir);if (!dir.exists()) {dir.mkdirs();}// 解壓文件try (ZipInputStream zis = new ZipInputStream(file.getInputStream(), Charset.forName("GBK"))) {ZipEntry zipEntry;byte[] buffer = new byte[1024];while ((zipEntry = zis.getNextEntry()) != null) {File newFile = new File(extractDir + File.separator + zipEntry.getName());if (zipEntry.isDirectory()) {newFile.mkdirs();continue;}// 創建父目錄new File(newFile.getParent()).mkdirs();// 寫入文件try (FileOutputStream fos = new FileOutputStream(newFile)) {int len;while ((len = zis.read(buffer)) > 0) {fos.write(buffer, 0, len);}}}}// 查找第一層的HTML文件List<HtmlFile> htmlFiles = new ArrayList<>();// 提取文件夾名稱（去掉擴展名）String folderName = file.getOriginalFilename().substring(0, file.getOriginalFilename().lastIndexOf('.'));extractDir = extractDir + File.separator + folderName;try (DirectoryStream<Path> stream = Files.newDirectoryStream(Paths.get(extractDir))) {for (Path path : stream) {if (Files.isRegularFile(path) && path.toString().toLowerCase().endsWith(".html")) {htmlFiles.add(new HtmlFile(path.getFileName().toString(), "/preview" + path.toString().substring(zipConfig.getExtract().getPath().length())));}}}return htmlFiles;}
}
![[C++] STL中的向量容器＜vector＞附加練習](http://pic.xiahunao.cn/[C++] STL中的向量容器＜vector＞附加練習)