新增: 导出 JSON + 导入 JSON + 打印/PDF 导出(P4)
- 工具栏新增三个按钮: 导出 JSON / 导入 JSON / 打印 PDF - 导出 JSON: Blob 下载 store.exportJSON() - 导入 JSON: 文件选择 + FileReader → store.importJSON() - 打印 PDF: window.print() + @media print CSS,逐页 page-break - 打印时隐藏编辑器/HUD/工具栏,只保留幻灯片内容 - 零新依赖(PDF 走浏览器原生打印)
This commit is contained in:
46
src/App.vue
46
src/App.vue
@@ -71,6 +71,49 @@ function onSave() {
|
||||
}
|
||||
function openAi() { switchTab('ai') }
|
||||
|
||||
/* ---------- 导出/导入 ---------- */
|
||||
function onExportJson() {
|
||||
const json = store.exportJSON()
|
||||
const blob = new Blob([json], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'u-ppt-export.json'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
toast('已导出 JSON')
|
||||
}
|
||||
|
||||
function onImportJson() {
|
||||
const input = document.createElement('input')
|
||||
input.type = 'file'
|
||||
input.accept = '.json,application/json'
|
||||
input.onchange = () => {
|
||||
const file = input.files?.[0]
|
||||
if (!file) return
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
try {
|
||||
store.importJSON(reader.result as string)
|
||||
toast('已导入')
|
||||
} catch (e: any) {
|
||||
toast('导入失败:' + (e?.message || String(e)))
|
||||
}
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
input.click()
|
||||
}
|
||||
|
||||
function onExportPdf() {
|
||||
// 用浏览器打印 + @media print CSS 实现 PDF 导出
|
||||
// 演示模式的 slide-layer 已有 print 样式
|
||||
document.body.classList.add('printing')
|
||||
window.print()
|
||||
setTimeout(() => document.body.classList.remove('printing'), 500)
|
||||
toast('在打印对话框中选择「另存为 PDF」')
|
||||
}
|
||||
|
||||
/* ---------- 全局快捷键(编辑模式) ---------- */
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (document.body.dataset.mode === 'present') return
|
||||
@@ -119,6 +162,9 @@ onUnmounted(() => {
|
||||
@open-ai="openAi"
|
||||
@save="onSave"
|
||||
@open-templates="templateVisible = true"
|
||||
@export-json="onExportJson"
|
||||
@import-json="onImportJson"
|
||||
@export-pdf="onExportPdf"
|
||||
/>
|
||||
|
||||
<div class="editor-body">
|
||||
|
||||
Reference in New Issue
Block a user