This commit is contained in:
rehlert committed
1 parent
57b38fe2c7
commit
ea21fc000f
13 files changed
+2237
-648
No files matched your search
@@ -1,140 +1,99 @@
|
||||
<script lang="ts">
|
||||
import { PDFDocument } from 'pdf-lib';
|
||||
import BatchFileList from '$lib/components/BatchFileList.svelte';
|
||||
import FileDropzone from '$lib/components/FileDropzone.svelte';
|
||||
import RasterizationWarning from '$lib/components/RasterizationWarning.svelte';
|
||||
import Button from '$lib/components/ui/button.svelte';
|
||||
import { createBatchItem, runBatch, type BatchItem } from '$lib/batch';
|
||||
import { downloadBlob } from '$lib/download';
|
||||
import { isRasterizationTooLarge } from '$lib/rasterization-limits';
|
||||
import {
|
||||
compressWithPreset,
|
||||
compressionPresets,
|
||||
defaultCompressionPreset
|
||||
} from '$lib/pdf-compression';
|
||||
import { isRasterizationTooLarge, RASTERIZATION_MAX_BYTES } from '$lib/rasterization-limits';
|
||||
import { AlertTriangle } from '@lucide/svelte';
|
||||
|
||||
type CompressionPreset = {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
scale: number;
|
||||
quality: number;
|
||||
};
|
||||
let items = $state<BatchItem[]>([]);
|
||||
let selectedPreset = $state(defaultCompressionPreset.id);
|
||||
let isRunning = $state(false);
|
||||
|
||||
const presets: CompressionPreset[] = [
|
||||
{
|
||||
id: 'strong',
|
||||
label: 'Starke Komprimierung',
|
||||
description: '~72 DPI, JPEG 50%',
|
||||
scale: 1,
|
||||
quality: 0.5
|
||||
},
|
||||
{
|
||||
id: 'balanced',
|
||||
label: 'Ausgewogen',
|
||||
description: '~108 DPI, JPEG 70%',
|
||||
scale: 1.5,
|
||||
quality: 0.7
|
||||
},
|
||||
{ id: 'light', label: 'Leicht', description: '~144 DPI, JPEG 85%', scale: 2, quality: 0.85 }
|
||||
];
|
||||
const pendingCount = $derived(items.filter((item) => item.status === 'pending').length);
|
||||
const canStart = $derived(pendingCount > 0 && !isRunning);
|
||||
|
||||
let pdfFile: File | null = $state(null);
|
||||
let selectedPreset = $state('balanced');
|
||||
let isProcessing = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let compressedBytes = $state<Uint8Array | null>(null);
|
||||
let compressedFileName = $state('');
|
||||
const rasterizationBlocked = $derived(isRasterizationTooLarge(pdfFile));
|
||||
|
||||
const handleFileSelected = (files: File[]) => {
|
||||
pdfFile = files[0] ?? null;
|
||||
error = null;
|
||||
compressedBytes = null;
|
||||
compressedFileName = '';
|
||||
};
|
||||
|
||||
const formatBytes = (bytes: number) => {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const compressPdf = async () => {
|
||||
if (!pdfFile) return;
|
||||
|
||||
const preset = presets.find((p) => p.id === selectedPreset) ?? presets[1];
|
||||
|
||||
isProcessing = true;
|
||||
error = null;
|
||||
compressedBytes = null;
|
||||
|
||||
try {
|
||||
const pdfjsLib = await import('pdfjs-dist');
|
||||
const { getDocument, GlobalWorkerOptions } = pdfjsLib;
|
||||
|
||||
GlobalWorkerOptions.workerSrc = await import('pdfjs-dist/build/pdf.worker.mjs?url').then(
|
||||
(m) => m.default
|
||||
);
|
||||
|
||||
const bytes = new Uint8Array(await pdfFile.arrayBuffer());
|
||||
const loadingTask = getDocument({ data: bytes });
|
||||
|
||||
try {
|
||||
const pdfjsDoc = await loadingTask.promise;
|
||||
const outputPdf = await PDFDocument.create();
|
||||
|
||||
for (let pageNumber = 1; pageNumber <= pdfjsDoc.numPages; pageNumber += 1) {
|
||||
const page = await pdfjsDoc.getPage(pageNumber);
|
||||
const viewport = page.getViewport({ scale: preset.scale });
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = Math.ceil(viewport.width);
|
||||
canvas.height = Math.ceil(viewport.height);
|
||||
const canvasContext = canvas.getContext('2d');
|
||||
if (!canvasContext) throw new Error('Could not create canvas context');
|
||||
|
||||
await page.render({
|
||||
canvas,
|
||||
canvasContext,
|
||||
viewport,
|
||||
background: '#ffffff'
|
||||
}).promise;
|
||||
|
||||
const jpegBlob = await new Promise<Blob>((resolve, reject) => {
|
||||
canvas.toBlob(
|
||||
(result) => (result ? resolve(result) : reject(new Error('JPEG encode failed'))),
|
||||
'image/jpeg',
|
||||
preset.quality
|
||||
);
|
||||
});
|
||||
const jpegImage = await outputPdf.embedJpg(new Uint8Array(await jpegBlob.arrayBuffer()));
|
||||
const originalViewport = page.getViewport({ scale: 1 });
|
||||
const pdfPage = outputPdf.addPage([originalViewport.width, originalViewport.height]);
|
||||
pdfPage.drawImage(jpegImage, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pdfPage.getWidth(),
|
||||
height: pdfPage.getHeight()
|
||||
});
|
||||
const handleFilesSelected = (files: File[]) => {
|
||||
const knownKeys = new Set(items.map((item) => `${item.file.name}:${item.file.size}`));
|
||||
const additions = files
|
||||
.filter((file) => !knownKeys.has(`${file.name}:${file.size}`))
|
||||
.map((file) => {
|
||||
const item = createBatchItem(file);
|
||||
if (isRasterizationTooLarge(file)) {
|
||||
item.status = 'error';
|
||||
item.errorMessage = `Diese Datei ist größer als ${RASTERIZATION_MAX_BYTES / (1024 * 1024)} MB und kann aus Speichergründen nicht im Browser gerastert werden.`;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
items = [...items, ...additions];
|
||||
};
|
||||
|
||||
compressedBytes = await outputPdf.save();
|
||||
compressedFileName = `${pdfFile.name.replace(/\.pdf$/i, '')}_komprimiert.pdf`;
|
||||
} finally {
|
||||
await loadingTask.destroy();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Compression failed:', err);
|
||||
error = 'Fehler beim Komprimieren des PDFs.';
|
||||
const updateItem = (id: string, patch: Partial<BatchItem>) => {
|
||||
items = items.map((item) => (item.id === id ? { ...item, ...patch } : item));
|
||||
};
|
||||
|
||||
const processFile = async (file: File) => {
|
||||
// The preset is read per file so an option change during a run only
|
||||
// affects the still pending files.
|
||||
const preset =
|
||||
compressionPresets.find((entry) => entry.id === selectedPreset) ?? defaultCompressionPreset;
|
||||
const bytes = await compressWithPreset(file, preset);
|
||||
return { bytes, name: `${file.name.replace(/\.pdf$/i, '')}_komprimiert.pdf` };
|
||||
};
|
||||
|
||||
const startBatch = async () => {
|
||||
if (isRunning) return;
|
||||
const queue = items.filter((item) => item.status === 'pending');
|
||||
if (queue.length === 0) return;
|
||||
|
||||
isRunning = true;
|
||||
try {
|
||||
await runBatch(queue, processFile, updateItem, {
|
||||
errorMessage: 'Diese PDF konnte nicht komprimiert werden.',
|
||||
// Skip rows removed while they were still waiting in the queue.
|
||||
shouldProcess: (id) => items.some((item) => item.id === id)
|
||||
});
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
isRunning = false;
|
||||
}
|
||||
};
|
||||
|
||||
const downloadCompressedPdf = () => {
|
||||
if (compressedBytes) downloadBlob(compressedBytes, compressedFileName);
|
||||
const retryItem = async (id: string) => {
|
||||
if (isRunning) return;
|
||||
const item = items.find((entry) => entry.id === id);
|
||||
if (!item) return;
|
||||
|
||||
isRunning = true;
|
||||
try {
|
||||
await runBatch([item], processFile, updateItem, {
|
||||
errorMessage: 'Diese PDF konnte nicht komprimiert werden.'
|
||||
});
|
||||
} finally {
|
||||
isRunning = false;
|
||||
}
|
||||
};
|
||||
|
||||
const removeItem = (id: string) => {
|
||||
items = items.filter((item) => item.id !== id);
|
||||
};
|
||||
|
||||
const downloadItem = (item: BatchItem) => {
|
||||
if (item.resultBytes && item.resultName) downloadBlob(item.resultBytes, item.resultName);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-4xl space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-primary-900">Komprimieren</h1>
|
||||
<p class="mt-2 text-sm text-primary-700">
|
||||
Reduzieren Sie die Dateigröße Ihres PDFs durch Komprimierung.
|
||||
<h1 class="text-2xl font-bold text-foreground">Komprimieren</h1>
|
||||
<p class="mt-2 text-sm text-primary">
|
||||
Reduzieren Sie die Dateigröße Ihrer PDFs durch Komprimierung – einzeln oder mehrere in einem
|
||||
Durchlauf.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -149,70 +108,64 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !pdfFile}
|
||||
<FileDropzone onFilesSelected={handleFileSelected} />
|
||||
{:else}
|
||||
<div class="space-y-6">
|
||||
<FileDropzone
|
||||
onFilesSelected={handleFileSelected}
|
||||
label="Anderes PDF ablegen"
|
||||
sublabel={pdfFile.name}
|
||||
class="py-4"
|
||||
/>
|
||||
<RasterizationWarning file={pdfFile} />
|
||||
<div class="rounded-xl border border-primary-200 bg-white p-4 space-y-4">
|
||||
<h2 class="text-lg font-semibold text-primary-900">{pdfFile.name}</h2>
|
||||
<p class="text-sm text-primary-700">Dateigröße: {formatBytes(pdfFile.size)}</p>
|
||||
<FileDropzone
|
||||
onFilesSelected={handleFilesSelected}
|
||||
multiple
|
||||
label={items.length === 0 ? 'Dateien hinzufügen' : 'Weitere Dateien ablegen'}
|
||||
sublabel={items.length === 0
|
||||
? 'PDFs hier ablegen oder zum Auswählen klicken'
|
||||
: 'Weitere PDFs hinzufügen – bestehende Dateien bleiben erhalten'}
|
||||
/>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm font-medium text-primary-900">Komprimierungsstufe</p>
|
||||
{#each presets as preset}
|
||||
<label
|
||||
class="flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition {selectedPreset ===
|
||||
preset.id
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-primary-200 hover:border-primary-300'}"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="compression-preset"
|
||||
value={preset.id}
|
||||
bind:group={selectedPreset}
|
||||
onchange={() => {
|
||||
compressedBytes = null;
|
||||
compressedFileName = '';
|
||||
}}
|
||||
class="mt-0.5 h-4 w-4"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-primary-900">{preset.label}</p>
|
||||
<p class="text-xs text-primary-700">{preset.description}</p>
|
||||
</div>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{#if items.length > 0}
|
||||
<div class="rounded-2xl border border-border bg-card p-4 space-y-4">
|
||||
<h2 class="text-lg font-semibold text-foreground">Komprimierungsstufe</h2>
|
||||
<p class="text-xs text-primary">Die Einstellung gilt für alle Dateien der Liste.</p>
|
||||
|
||||
{#if compressedBytes}
|
||||
<p class="text-sm text-primary-700">
|
||||
Ergebnisgröße: <span class="font-semibold">{formatBytes(compressedBytes.length)}</span>
|
||||
</p>
|
||||
{/if}
|
||||
<div class="space-y-2">
|
||||
{#each compressionPresets as preset (preset.id)}
|
||||
<label
|
||||
class="flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition {selectedPreset ===
|
||||
preset.id
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-primary-300'}"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="compression-preset"
|
||||
value={preset.id}
|
||||
bind:group={selectedPreset}
|
||||
class="mt-0.5 h-4 w-4"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-foreground">{preset.label}</p>
|
||||
<p class="text-xs text-primary">{preset.description}</p>
|
||||
</div>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800">
|
||||
{error}
|
||||
</div>
|
||||
{#if isRunning}
|
||||
<p class="text-xs text-primary" role="note">
|
||||
Änderungen an der Komprimierungsstufe gelten für die noch ausstehenden Dateien.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button onclick={compressPdf} disabled={isProcessing || rasterizationBlocked}>
|
||||
{isProcessing ? 'Wird komprimiert...' : 'Komprimieren'}
|
||||
</Button>
|
||||
{#if compressedBytes}
|
||||
<Button onclick={downloadCompressedPdf}>PDF herunterladen</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if items.length > 0}
|
||||
<BatchFileList
|
||||
{items}
|
||||
zipBaseName="komprimiert"
|
||||
onDownload={downloadItem}
|
||||
onRemove={removeItem}
|
||||
onRetry={retryItem}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Button onclick={startBatch} disabled={!canStart}>
|
||||
{isRunning ? 'Wird komprimiert...' : 'Komprimieren'}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in new issue
Block a user