Stefan Hacker
6aad986d78
Download-Endpoint unterstuetzt jetzt ?inline=1, wodurch Content-Disposition auf inline statt attachment gesetzt wird. PDF- und Bild-Preview nutzen diesen Parameter, damit der Browser das PDF im Preview-Iframe rendert statt einen Download auszuloesen. Normale Download-Buttons bleiben unveraendert. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
289 lines
11 KiB
Vue
289 lines
11 KiB
Vue
<template>
|
|
<div class="preview-container">
|
|
<div class="preview-toolbar">
|
|
<div class="toolbar-left">
|
|
<Button icon="pi pi-arrow-left" text @click="$router.back()" />
|
|
<h3>{{ fileName }}</h3>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<Button v-if="canEdit && !editing && !onlyOfficeMode" icon="pi pi-pencil" label="Bearbeiten" size="small" outlined @click="startEdit" />
|
|
<Button v-if="editing && !onlyOfficeMode" icon="pi pi-save" label="Speichern" size="small" @click="saveEdit" :loading="saving" />
|
|
<Button v-if="editing && !onlyOfficeMode" label="Abbrechen" size="small" text @click="cancelEdit" />
|
|
<Button icon="pi pi-download" label="Herunterladen" size="small" outlined @click="downloadFile" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="loading">
|
|
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
|
<p>Vorschau wird geladen...</p>
|
|
</div>
|
|
|
|
<div v-else-if="error" class="error-state">
|
|
<i class="pi pi-exclamation-triangle" style="font-size: 2rem; color: var(--p-orange-500)"></i>
|
|
<p>{{ error }}</p>
|
|
</div>
|
|
|
|
<!-- OnlyOffice Editor -->
|
|
<div v-else-if="onlyOfficeMode" class="preview-content">
|
|
<div id="onlyoffice-editor" class="oo-frame"></div>
|
|
</div>
|
|
|
|
<!-- PDF -->
|
|
<div v-else-if="previewType === 'pdf'" class="preview-content">
|
|
<iframe :src="previewUrl" class="pdf-frame"></iframe>
|
|
</div>
|
|
|
|
<!-- Image -->
|
|
<div v-else-if="previewType === 'image'" class="preview-content image-preview">
|
|
<img :src="previewUrl" :alt="fileName" />
|
|
</div>
|
|
|
|
<!-- HTML (DOCX fallback) -->
|
|
<div v-else-if="previewType === 'html'" class="preview-content">
|
|
<div v-if="!editing" class="document-frame" v-html="htmlContent"></div>
|
|
<div v-else class="editor-frame">
|
|
<div ref="editorRef" contenteditable="true" class="document-editor" v-html="htmlContent"
|
|
@input="editorDirty = true"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Spreadsheet (XLSX fallback) -->
|
|
<div v-else-if="previewType === 'spreadsheet'" class="preview-content">
|
|
<div class="sheet-tabs" v-if="sheets.length > 1">
|
|
<button v-for="(sheet, i) in sheets" :key="i"
|
|
:class="{ active: activeSheet === i }" @click="activeSheet = i">
|
|
{{ sheet.name }}
|
|
</button>
|
|
</div>
|
|
<div class="spreadsheet-wrapper">
|
|
<table class="spreadsheet" v-if="sheets[activeSheet]">
|
|
<tr v-for="(row, ri) in sheets[activeSheet].rows" :key="ri">
|
|
<td v-for="(cell, ci) in row" :key="ci"
|
|
:contenteditable="editing"
|
|
@input="onCellEdit(ri, ci, $event)">{{ cell }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slides (PPTX fallback) -->
|
|
<div v-else-if="previewType === 'slides'" class="preview-content">
|
|
<div class="slides-nav">
|
|
<Button icon="pi pi-chevron-left" text :disabled="activeSlide <= 0" @click="activeSlide--" />
|
|
<span>Folie {{ activeSlide + 1 }} / {{ slides.length }}</span>
|
|
<Button icon="pi pi-chevron-right" text :disabled="activeSlide >= slides.length - 1" @click="activeSlide++" />
|
|
</div>
|
|
<div v-if="slides[activeSlide]" class="slide-frame" v-html="slides[activeSlide].html"></div>
|
|
</div>
|
|
|
|
<!-- Text -->
|
|
<div v-else-if="previewType === 'text'" class="preview-content">
|
|
<textarea v-if="editing" v-model="textContent" class="text-editor"></textarea>
|
|
<pre v-else class="text-frame">{{ textContent }}</pre>
|
|
</div>
|
|
|
|
<!-- Unsupported -->
|
|
<div v-else-if="previewType === 'unsupported'" class="error-state">
|
|
<i class="pi pi-file" style="font-size: 2rem; color: var(--p-surface-400)"></i>
|
|
<p>Vorschau fuer diesen Dateityp nicht verfuegbar</p>
|
|
<Button label="Herunterladen" icon="pi pi-download" @click="downloadFile" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import { useToast } from 'primevue/usetoast'
|
|
import apiClient from '../api/client'
|
|
import Button from 'primevue/button'
|
|
|
|
const route = useRoute()
|
|
const auth = useAuthStore()
|
|
const toast = useToast()
|
|
|
|
const fileId = route.params.fileId
|
|
const cacheBust = Date.now()
|
|
const fileName = ref('')
|
|
const previewType = ref('')
|
|
const previewUrl = ref('')
|
|
const htmlContent = ref('')
|
|
const textContent = ref('')
|
|
const sheets = ref([])
|
|
const activeSheet = ref(0)
|
|
const slides = ref([])
|
|
const activeSlide = ref(0)
|
|
const loading = ref(true)
|
|
const error = ref('')
|
|
const editing = ref(false)
|
|
const editorDirty = ref(false)
|
|
const saving = ref(false)
|
|
const editorRef = ref(null)
|
|
const canEdit = ref(false)
|
|
const onlyOfficeMode = ref(false)
|
|
|
|
function getTokenUrl(path) {
|
|
return `${path}${path.includes('?') ? '&' : '?'}token=${encodeURIComponent(auth.accessToken || '')}`
|
|
}
|
|
|
|
// Check if file is an Office format that OnlyOffice can handle
|
|
function isOfficeFile(name) {
|
|
return /\.(docx?|xlsx?|pptx?|odt|ods|odp|rtf|csv)$/i.test(name)
|
|
}
|
|
|
|
async function loadPreview() {
|
|
loading.value = true
|
|
try {
|
|
// For Office files, try OnlyOffice first
|
|
const previewRes = await apiClient.get(`/files/${fileId}/preview?_=${cacheBust}`)
|
|
fileName.value = previewRes.data.name || ''
|
|
|
|
if (isOfficeFile(fileName.value)) {
|
|
try {
|
|
const ooRes = await apiClient.get(`/files/${fileId}/onlyoffice-config?_=${cacheBust}`)
|
|
if (ooRes.data.available) {
|
|
onlyOfficeMode.value = true
|
|
loading.value = false
|
|
await nextTick()
|
|
initOnlyOffice(ooRes.data)
|
|
return
|
|
}
|
|
} catch { /* OnlyOffice not available, fall through to simple preview */ }
|
|
}
|
|
|
|
// Simple preview fallback
|
|
const data = previewRes.data
|
|
previewType.value = data.type
|
|
|
|
if (data.type === 'pdf' || data.type === 'image') {
|
|
previewUrl.value = getTokenUrl(`/api/files/${fileId}/download?inline=1`)
|
|
canEdit.value = false
|
|
} else if (data.type === 'html') {
|
|
htmlContent.value = data.content
|
|
canEdit.value = true
|
|
} else if (data.type === 'spreadsheet') {
|
|
sheets.value = data.sheets
|
|
canEdit.value = true
|
|
} else if (data.type === 'slides') {
|
|
slides.value = data.slides
|
|
canEdit.value = false
|
|
} else if (data.type === 'text') {
|
|
textContent.value = data.content
|
|
canEdit.value = true
|
|
} else {
|
|
previewType.value = 'unsupported'
|
|
}
|
|
} catch (err) {
|
|
error.value = err.response?.data?.error || 'Vorschau konnte nicht geladen werden'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function initOnlyOffice(ooData) {
|
|
const ooUrl = ooData.onlyoffice_url
|
|
|
|
// Load OnlyOffice API script
|
|
const script = document.createElement('script')
|
|
script.src = `${ooUrl}/web-apps/apps/api/documents/api.js`
|
|
script.onload = () => {
|
|
if (window.DocsAPI) {
|
|
new window.DocsAPI.DocEditor('onlyoffice-editor', ooData.config)
|
|
}
|
|
}
|
|
script.onerror = () => {
|
|
onlyOfficeMode.value = false
|
|
error.value = 'OnlyOffice konnte nicht geladen werden. Fallback auf einfache Vorschau.'
|
|
loadPreview()
|
|
}
|
|
document.head.appendChild(script)
|
|
}
|
|
|
|
function downloadFile() {
|
|
window.location.href = getTokenUrl(`/api/files/${fileId}/download`)
|
|
}
|
|
|
|
function startEdit() {
|
|
editing.value = true
|
|
editorDirty.value = false
|
|
}
|
|
|
|
function cancelEdit() {
|
|
editing.value = false
|
|
loadPreview()
|
|
}
|
|
|
|
function onCellEdit(ri, ci, event) {
|
|
sheets.value[activeSheet.value].rows[ri][ci] = event.target.textContent
|
|
editorDirty.value = true
|
|
}
|
|
|
|
async function saveEdit() {
|
|
saving.value = true
|
|
try {
|
|
let payload = {}
|
|
if (previewType.value === 'html') {
|
|
payload = { type: 'html', content: editorRef.value ? editorRef.value.innerHTML : htmlContent.value }
|
|
} else if (previewType.value === 'spreadsheet') {
|
|
payload = { type: 'spreadsheet', sheets: sheets.value }
|
|
} else if (previewType.value === 'text') {
|
|
payload = { type: 'text', content: textContent.value }
|
|
}
|
|
await apiClient.post(`/files/${fileId}/save`, payload)
|
|
editing.value = false
|
|
toast.add({ severity: 'success', summary: 'Gespeichert', life: 3000 })
|
|
} catch (err) {
|
|
toast.add({ severity: 'error', summary: 'Speichern fehlgeschlagen', detail: err.response?.data?.error || String(err), life: 5000 })
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(loadPreview)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.preview-container { display: flex; flex-direction: column; height: calc(100vh - 0px); }
|
|
.preview-toolbar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0.5rem 1rem; border-bottom: 1px solid var(--p-surface-200);
|
|
background: var(--p-surface-0); flex-shrink: 0;
|
|
}
|
|
.toolbar-left { display: flex; align-items: center; gap: 0.5rem; }
|
|
.toolbar-left h3 { margin: 0; font-size: 1rem; }
|
|
.toolbar-right { display: flex; gap: 0.5rem; }
|
|
.loading, .error-state {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
flex: 1; gap: 0.75rem; color: var(--p-text-muted-color);
|
|
}
|
|
.preview-content { flex: 1; overflow: auto; }
|
|
.oo-frame { width: 100%; height: 100%; }
|
|
.pdf-frame { width: 100%; height: 100%; border: none; }
|
|
.image-preview { display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--p-surface-100); }
|
|
.image-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
|
.document-frame {
|
|
max-width: 800px; margin: 0 auto; padding: 2rem; background: white;
|
|
min-height: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.05);
|
|
font-family: serif; font-size: 14px; line-height: 1.6;
|
|
}
|
|
.editor-frame { max-width: 800px; margin: 0 auto; background: white; min-height: 100%; }
|
|
.document-editor {
|
|
padding: 2rem; min-height: 600px; outline: none;
|
|
font-family: serif; font-size: 14px; line-height: 1.6;
|
|
border: 2px solid var(--p-primary-color);
|
|
}
|
|
.sheet-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--p-surface-200); padding: 0 1rem; background: var(--p-surface-50); }
|
|
.sheet-tabs button { padding: 0.5rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.85rem; border-bottom: 2px solid transparent; }
|
|
.sheet-tabs button.active { border-bottom-color: var(--p-primary-color); color: var(--p-primary-color); font-weight: 600; }
|
|
.spreadsheet-wrapper { overflow: auto; padding: 0.5rem; }
|
|
.spreadsheet { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
|
|
.spreadsheet td { border: 1px solid var(--p-surface-200); padding: 4px 8px; min-width: 80px; white-space: nowrap; }
|
|
.spreadsheet tr:first-child td { font-weight: 600; background: var(--p-surface-100); }
|
|
.spreadsheet td[contenteditable="true"]:focus { outline: 2px solid var(--p-primary-color); background: var(--p-primary-50); }
|
|
.slides-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.75rem; border-bottom: 1px solid var(--p-surface-200); }
|
|
.slide-frame { max-width: 900px; margin: 2rem auto; padding: 3rem; background: white; min-height: 500px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 4px; font-size: 16px; }
|
|
.text-frame { padding: 1.5rem; margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
|
|
.text-editor { width: 100%; height: 100%; min-height: 500px; padding: 1.5rem; font-family: monospace; font-size: 0.9rem; border: none; outline: none; resize: none; }
|
|
</style>
|