424 lines
19 KiB
HTML
424 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>EPUB CSS 清理工具 (Web版)</title>
|
||
<style>
|
||
body {
|
||
font-family: sans-serif;
|
||
line-height: 1.6;
|
||
padding: 20px;
|
||
max-width: 600px;
|
||
margin: 20px auto;
|
||
background-color: #f4f4f4;
|
||
border: 1px solid #ccc;
|
||
border-radius: 8px;
|
||
}
|
||
h1 {
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
#drop-area {
|
||
border: 2px dashed #ccc;
|
||
border-radius: 5px;
|
||
padding: 30px;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
margin-bottom: 20px;
|
||
cursor: pointer;
|
||
}
|
||
#drop-area.highlight {
|
||
border-color: dodgerblue;
|
||
}
|
||
#drop-area p {
|
||
margin: 0;
|
||
color: #555;
|
||
}
|
||
#fileInput {
|
||
display: none; /* Hide default input, use drop area or label */
|
||
}
|
||
label.file-label {
|
||
display: inline-block;
|
||
padding: 10px 15px;
|
||
background-color: dodgerblue;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
transition: background-color 0.2s;
|
||
}
|
||
label.file-label:hover {
|
||
background-color: #007ae5;
|
||
}
|
||
|
||
#status {
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
background-color: #eee;
|
||
border-radius: 4px;
|
||
min-height: 40px; /* Ensure space for messages */
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
.status-details {
|
||
font-size: 0.9em;
|
||
color: #555;
|
||
margin-top: 5px;
|
||
}
|
||
.warning {
|
||
color: #a00;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
background-color: #fdd;
|
||
border: 1px solid #fbb;
|
||
border-radius: 4px;
|
||
}
|
||
progress {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
display: none; /* Hidden by default */
|
||
}
|
||
</style>
|
||
<!-- Include JSZip library -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||
<!-- Include FileSaver.js library -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>EPUB CSS 清理工具 (Web版)</h1>
|
||
|
||
<p>将单个 EPUB 文件或包含多个 EPUB 的 ZIP 文件拖拽到下方区域，或点击按钮选择文件，即可移除指定的 CSS 样式。</p>
|
||
|
||
<div id="drop-area">
|
||
<!-- Accept both .epub and .zip -->
|
||
<input type="file" id="fileInput" accept=".epub,.zip">
|
||
<p>将 EPUB 或 ZIP 文件拖拽到这里</p>
|
||
<label for="fileInput" class="file-label">或者选择文件</label>
|
||
</div>
|
||
|
||
<progress id="progressBar" value="0" max="100"></progress>
|
||
<div id="status">请选择或拖拽一个 EPUB 或 ZIP 文件。</div>
|
||
<div id="statusDetails" class="status-details"></div>
|
||
|
||
<div class="warning">
|
||
<strong>重要提示:</strong> 此工具在你的浏览器中处理文件，不会上传到服务器。处理后的文件需要你手动下载。建议在处理前备份原始文件！处理 ZIP 文件时，会生成一个包含所有处理后（或原始）EPUB 的新 ZIP 文件。
|
||
</div>
|
||
|
||
<script>
|
||
// --- Check if libraries loaded ---
|
||
if (typeof JSZip === 'undefined' || typeof saveAs === 'undefined') {
|
||
const errorMsg = '错误：无法加载必需的库 (JSZip 或 FileSaver)。请检查您的网络连接，并确保没有浏览器插件（如广告拦截器）阻止从 cdnjs.cloudflare.com 加载脚本。然后请刷新页面重试。';
|
||
document.getElementById('status').textContent = errorMsg;
|
||
document.getElementById('status').style.color = '#a00';
|
||
document.getElementById('drop-area').style.display = 'none';
|
||
document.querySelector('.warning').textContent = errorMsg;
|
||
} else {
|
||
// --- Global Variables & Constants ---
|
||
const dropArea = document.getElementById('drop-area');
|
||
const fileInput = document.getElementById('fileInput');
|
||
const statusDiv = document.getElementById('status');
|
||
const statusDetailsDiv = document.getElementById('statusDetails');
|
||
const progressBar = document.getElementById('progressBar');
|
||
const CSS_REMOVE_PATTERN = /((text-indent|line-height|font-size|height|font-family|color)\s*:\s*[^;]*;|display\s*:\s*block\s*;)/ig;
|
||
|
||
// --- Event Handlers ---
|
||
setupDragDropHandlers();
|
||
fileInput.addEventListener('change', handleFileSelect, false);
|
||
|
||
function setupDragDropHandlers() {
|
||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||
document.body.addEventListener(eventName, preventDefaults, false);
|
||
});
|
||
['dragenter', 'dragover'].forEach(eventName => {
|
||
dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'), false);
|
||
});
|
||
['dragleave', 'drop'].forEach(eventName => {
|
||
dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'), false);
|
||
});
|
||
dropArea.addEventListener('drop', handleDrop, false);
|
||
}
|
||
|
||
function preventDefaults(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
function handleDrop(e) {
|
||
handleFiles(e.dataTransfer.files);
|
||
}
|
||
|
||
function handleFileSelect(e) {
|
||
handleFiles(e.target.files);
|
||
}
|
||
|
||
// --- Main File Handling Logic ---
|
||
function handleFiles(files) {
|
||
if (files.length === 0) return;
|
||
const file = files[0]; // Process only the first file
|
||
|
||
// Check file type
|
||
const isEpub = file.name.toLowerCase().endsWith('.epub');
|
||
const isZip = file.name.toLowerCase().endsWith('.zip');
|
||
|
||
if (!isEpub && !isZip) {
|
||
updateStatus('错误：请选择一个 .epub 或 .zip 文件。', true);
|
||
resetInput();
|
||
return;
|
||
}
|
||
|
||
updateStatus(`正在读取文件: ${file.name}...`);
|
||
clearStatusDetails();
|
||
progressBar.style.display = 'block';
|
||
progressBar.value = 0;
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = async (e) => {
|
||
const fileContent = e.target.result; // ArrayBuffer
|
||
try {
|
||
if (isEpub) {
|
||
updateStatus(`正在处理 EPUB 文件: ${file.name}...`);
|
||
const result = await processEpub(fileContent, file.name);
|
||
if (result.blob) {
|
||
saveAs(result.blob, result.filename);
|
||
updateStatus(`处理完成！已生成 ${result.filename}。`);
|
||
} else if (result.modified === false) {
|
||
updateStatus('信息：文件无需修改。');
|
||
}
|
||
resetInput();
|
||
} else if (isZip) {
|
||
updateStatus(`正在处理 ZIP 压缩包: ${file.name}...`);
|
||
await processZipArchive(fileContent, file.name);
|
||
}
|
||
} catch (error) {
|
||
console.error("处理失败:", error);
|
||
updateStatus(`处理失败：${error.message}`, true);
|
||
resetInput();
|
||
}
|
||
};
|
||
reader.onprogress = updateReadProgress;
|
||
reader.onerror = handleReadError;
|
||
reader.readAsArrayBuffer(file);
|
||
}
|
||
|
||
function updateReadProgress(e) {
|
||
if (e.lengthComputable) {
|
||
progressBar.value = Math.round((e.loaded / e.total) * 10); // Reading is ~10%
|
||
}
|
||
}
|
||
|
||
function handleReadError() {
|
||
updateStatus('错误：读取文件时出错。', true);
|
||
resetInput();
|
||
}
|
||
|
||
// --- ZIP Archive Processing ---
|
||
async function processZipArchive(zipFileContent, zipFilename) {
|
||
let outputZip = new JSZip();
|
||
let processedCount = 0;
|
||
let failedCount = 0;
|
||
let foundCount = 0;
|
||
let modifiedCount = 0;
|
||
let filePromises = [];
|
||
|
||
updateStatus(`正在打开 ZIP 压缩包...`);
|
||
progressBar.value = 15;
|
||
const inputZip = await JSZip.loadAsync(zipFileContent);
|
||
const totalFilesInZip = Object.keys(inputZip.files).length;
|
||
|
||
updateStatus(`在 ZIP 中查找 EPUB 文件...`);
|
||
|
||
inputZip.forEach((relativePath, zipEntry) => {
|
||
if (!zipEntry.dir && relativePath.toLowerCase().endsWith('.epub')) {
|
||
foundCount++;
|
||
updateStatusDetails(`找到 EPUB: ${relativePath}`);
|
||
|
||
// Add a promise to process this EPUB entry
|
||
const promise = zipEntry.async('arraybuffer')
|
||
.then(async (innerEpubContent) => {
|
||
try {
|
||
// Process the inner EPUB
|
||
const result = await processEpub(innerEpubContent, relativePath);
|
||
if (result.blob) {
|
||
// Add modified EPUB to output ZIP
|
||
outputZip.file(result.filename, result.blob);
|
||
modifiedCount++;
|
||
console.log(`Added cleaned ${result.filename} to output zip.`);
|
||
} else {
|
||
// Add original EPUB back if not modified
|
||
outputZip.file(relativePath, innerEpubContent);
|
||
console.log(`Added original ${relativePath} (no changes needed) to output zip.`);
|
||
}
|
||
processedCount++;
|
||
} catch (epubError) {
|
||
// Add original EPUB back if processing failed
|
||
console.error(`Error processing inner EPUB ${relativePath}:`, epubError);
|
||
updateStatusDetails(`处理 ${relativePath} 时出错，将保留原文件。`);
|
||
outputZip.file(relativePath, innerEpubContent); // Add original back
|
||
failedCount++;
|
||
}
|
||
})
|
||
.catch(extractError => {
|
||
// Handle error extracting the inner EPUB content
|
||
console.error(`Error extracting inner EPUB ${relativePath} from zip:`, extractError);
|
||
updateStatusDetails(`无法从 ZIP 中提取 ${relativePath}，已跳过。`);
|
||
failedCount++;
|
||
})
|
||
.finally(() => {
|
||
// Update progress based on entries processed (success or fail)
|
||
const progress = 15 + Math.round(((processedCount + failedCount) / foundCount) * 60); // Processing EPUBs is ~60%
|
||
progressBar.value = Math.min(progress, 75); // Cap at 75 before final packing
|
||
});
|
||
filePromises.push(promise);
|
||
}
|
||
// We are currently NOT adding non-EPUB files from the source ZIP to the output ZIP.
|
||
// To do so, handle the 'else' case here and add zipEntry data to outputZip.
|
||
});
|
||
|
||
// Wait for all inner EPUB processing promises to complete
|
||
await Promise.all(filePromises);
|
||
|
||
progressBar.value = 80; // Done processing files inside zip
|
||
|
||
if (foundCount === 0) {
|
||
updateStatus('错误：在 ZIP 文件中未找到任何 EPUB 文件。', true);
|
||
resetInput();
|
||
return;
|
||
}
|
||
|
||
updateStatus(`处理了 ${foundCount} 个 EPUB 文件。正在生成输出 ZIP...`);
|
||
statusDetailsDiv.innerHTML += `<br>成功: ${processedCount}, 修改: ${modifiedCount}, 失败/跳过: ${failedCount}`;
|
||
progressBar.value = 90;
|
||
|
||
const outputZipBlob = await outputZip.generateAsync({
|
||
type: "blob",
|
||
compression: "DEFLATE",
|
||
platform: "browser"
|
||
}, (metadata) => {
|
||
progressBar.value = 90 + Math.round(metadata.percent * 0.1);
|
||
});
|
||
|
||
progressBar.value = 100;
|
||
const baseName = zipFilename.substring(0, zipFilename.lastIndexOf('.')) || zipFilename;
|
||
const outputZipFilename = `${baseName}_cleaned.zip`;
|
||
saveAs(outputZipBlob, outputZipFilename);
|
||
|
||
updateStatus(`处理完成！已生成包含处理后 EPUB 的 ${outputZipFilename}。`);
|
||
resetInput();
|
||
}
|
||
|
||
|
||
// --- Single EPUB Processing (Modified to return result) ---
|
||
async function processEpub(fileContent, originalFilename) {
|
||
// This function now returns an object:
|
||
// { blob: Blob, filename: string } if modified
|
||
// { modified: false } if no modification needed
|
||
// Throws error if processing fails critically
|
||
|
||
console.log(`Processing EPUB: ${originalFilename}`);
|
||
// Note: Progress bar updates inside this function are less meaningful now,
|
||
// as the overall progress is handled by the caller (handleFiles or processZipArchive).
|
||
// We could pass a progress callback if detailed inner progress is needed.
|
||
|
||
const zip = await JSZip.loadAsync(fileContent);
|
||
const newZip = new JSZip();
|
||
let cssFilesFound = false;
|
||
let modified = false;
|
||
let filePromises = [];
|
||
|
||
zip.forEach((relativePath, zipEntry) => {
|
||
if (zipEntry.dir) { newZip.folder(relativePath); return; }
|
||
|
||
const options = {
|
||
date: zipEntry.date,
|
||
unixPermissions: zipEntry.unixPermissions,
|
||
dosPermissions: zipEntry.dosPermissions,
|
||
comment: zipEntry.comment,
|
||
dir: zipEntry.dir,
|
||
compression: zipEntry.options?.compression === "STORE" ? "STORE" : "DEFLATE"
|
||
};
|
||
|
||
if (relativePath.toLowerCase() === 'mimetype') {
|
||
const promise = zipEntry.async('uint8array').then(data => {
|
||
newZip.file(relativePath, data, { ...options, compression: "STORE" });
|
||
});
|
||
filePromises.push(promise);
|
||
} else if (relativePath.toLowerCase().endsWith('.css')) {
|
||
cssFilesFound = true;
|
||
const promise = zipEntry.async('string').then(originalCss => {
|
||
const cleanedCss = originalCss.replace(CSS_REMOVE_PATTERN, '');
|
||
let contentToAdd = originalCss;
|
||
if (cleanedCss !== originalCss) {
|
||
modified = true;
|
||
contentToAdd = cleanedCss;
|
||
console.log(` Cleaned CSS: ${relativePath}`);
|
||
}
|
||
newZip.file(relativePath, contentToAdd, options);
|
||
}).catch(err => {
|
||
console.warn(` Could not process CSS ${relativePath} as text, keeping original. Error: ${err}`);
|
||
return zipEntry.async('uint8array').then(originalData => {
|
||
newZip.file(relativePath, originalData, options);
|
||
});
|
||
});
|
||
filePromises.push(promise);
|
||
} else {
|
||
const promise = zipEntry.async('uint8array').then(data => {
|
||
newZip.file(relativePath, data, options);
|
||
});
|
||
filePromises.push(promise);
|
||
}
|
||
});
|
||
|
||
await Promise.all(filePromises);
|
||
|
||
if (!modified) {
|
||
console.log(` EPUB ${originalFilename} - No modifications needed.`);
|
||
return { modified: false }; // Indicate no changes were made
|
||
}
|
||
|
||
console.log(` Repacking modified EPUB: ${originalFilename}`);
|
||
const newEpubBlob = await newZip.generateAsync({
|
||
type: "blob",
|
||
mimeType: "application/epub+zip",
|
||
compression: "DEFLATE",
|
||
platform: "browser"
|
||
});
|
||
|
||
const baseName = originalFilename.substring(0, originalFilename.lastIndexOf('.')) || originalFilename;
|
||
const newFilename = `${baseName}_cleaned.epub`;
|
||
|
||
return { blob: newEpubBlob, filename: newFilename }; // Return data for the caller
|
||
} // end of processEpub function
|
||
|
||
// --- UI Update Functions ---
|
||
function updateStatus(message, isError = false) {
|
||
statusDiv.textContent = message;
|
||
statusDiv.style.color = isError ? '#a00' : '#000';
|
||
if (isError) {
|
||
progressBar.style.display = 'none';
|
||
clearStatusDetails();
|
||
}
|
||
}
|
||
function updateStatusDetails(message) {
|
||
statusDetailsDiv.innerHTML += message + "<br>";
|
||
}
|
||
function clearStatusDetails() {
|
||
statusDetailsDiv.innerHTML = "";
|
||
}
|
||
|
||
function resetInput() {
|
||
fileInput.value = '';
|
||
// Hide progress bar after a delay
|
||
setTimeout(() => { progressBar.style.display = 'none'; progressBar.value = 0; }, 5000);
|
||
}
|
||
} // End of the 'else' block for library check
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |