feat: 支持 PDF 导出功能

src/App.vue

@@ -12,7 +12,7 @@
         <template #right>
             <div ref="splitRight" class="split-right">
                 <MainEditor ref="mainEditor" v-model:markdownCode="markdownCode"
-                    v-model:leftSidebarState="leftSidebarState" :save="writeFileContent">
+                    v-model:leftSidebarState="leftSidebarState" :save="writeFileContent" @exportPDF="exportMarkdownPDF">
                 </MainEditor>
             </div>
         </template>
@@ -24,8 +24,9 @@ import LeftSidebar from './components/LeftSidebar.vue'
 import MainEditor from './components/MainEditor.vue'
 import { ref, watch, useTemplateRef, nextTick, onMounted, onUnmounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
-import { readTextFile, writeTextFile, exists } from '@tauri-apps/plugin-fs';
+import { readTextFile, writeTextFile, writeFile, exists } from '@tauri-apps/plugin-fs';
-import { Message } from 'view-ui-plus'
+import { save } from '@tauri-apps/plugin-dialog';
+import { Message, Notice } from 'view-ui-plus'
 
 // 原始示例数据，仅供参考
 const greetMsg = ref("");
@@ -79,6 +80,12 @@ watch(currentFilePath, async (newFilePath) => {
     localStorage.setItem('currentSelectedFilePath', newFilePath);
     await readFileContent(newFilePath);
 })
+const getFileNameFromFilePath = (filePath) => {
+    const fullFileName = currentFilePath.value.split('/').pop();
+    const splitResult = fullFileName.split(".");
+    splitResult.pop(); // 丢掉后缀
+    return splitResult.join('.');
+}
 
 const mainEditor = ref(null);
 const markdownCode = ref("# Hello Markdown");
@@ -122,6 +129,35 @@ async function writeFileContent(markdownCode) {
         Message.error('文件更新失败:' + err);
     }
 }
+async function exportMarkdownPDF(pdfBuffer) {
+    let fileName = 'markdown.pdf';
+    if (currentFilePath.value.length > 0) {
+        fileName = getFileNameFromFilePath(currentFilePath.value) + '.pdf';
+    }
+
+    try {
+        const filePath = await save({
+            title: '保存 PDF',      // 对话框标题
+            defaultPath: fileName, // 保存的文件名称
+        });
+
+        if (filePath) {
+            await writeFile(filePath, new Uint8Array(pdfBuffer));
+            Notice.success({
+                title: '导出成功',
+                desc: 'PDF 已保存至 ' + filePath,
+            });
+        } else {
+            console.log('用户主动取消');
+        }
+    } catch (err) {
+        console.log(err);
+        Notice.error({
+            title: '导出失败',
+            desc: '请将文件保存在用户有权限的目录之下',
+        });
+    }
+}
 
 const resizeHandler = () => {
     // splitRight 的宽度为视口宽度右边百分比，再减去 splitTrigger 的宽度

src/components/MainEditor.vue

@@ -18,6 +18,8 @@
                                 size="22" />
                         </template>
                     </NormalToolbar>
+                    <ExportPDF :modelValue="editorState.text" :customize="customizePDF"
+                        @onProgress="handleExportProgress" />
                     <NormalToolbar title="发布文章" @onClick="publish">
                         <template #trigger>
                             <Icon class="md-editor-icon" type="md-cloud-upload" size="22" />
@@ -42,8 +44,9 @@
 <script setup>
 import 'md-editor-v3/lib/style.css';
 import '@vavt/v3-extension/lib/asset/PreviewThemeSwitch.css';
+import '@vavt/v3-extension/lib/asset/ExportPDF.css';
 import { MdEditor, MdCatalog, NormalToolbar, DropdownToolbar } from 'md-editor-v3';
-import { ThemeSwitch, PreviewThemeSwitch } from '@vavt/v3-extension';
+import { ThemeSwitch, PreviewThemeSwitch, ExportPDF } from '@vavt/v3-extension';
 import { ref, reactive, watch } from "vue";
 import { Message } from 'view-ui-plus'
 
@@ -70,6 +73,7 @@ const props = defineProps({
 const emit = defineEmits([
     'update:markdownCode',
     'update:leftSidebarState',
+    'exportPDF',
 ]);
 
 // 定义布局，主要用于在右边显示文章目录
@@ -126,6 +130,7 @@ const editorState = reactive({
         'next',
         'save',
         2,
+        3,
         '=',
         'prettier',
         'pageFullscreen',
@@ -135,10 +140,11 @@ const editorState = reactive({
         'htmlPreview',
         'catalog',
         'github',
-        3,
         4,
+        5,
     ],
     toolbarsExclude: ['fullscreen', 'github'], // 工具栏排除全屏和 github 等
+    pdfIns: null, // 用于存储 PDF 导出时候的 jsPDF 实例
 });
 // 监听 markdownCode（由父组件更新） 和 text（本组件更新）以实现双向更新
 watch(() => props.markdownCode, (newCode) => {
@@ -180,6 +186,26 @@ const getPreviewedHTML = (html) => {
     console.log(html);
 }
 
+const customizePDF = (ins) => {
+    // 将 jsPDF 的实例记录到 editorState.pdfIns 便于后面获取
+    editorState.pdfIns = ins;
+}
+
+const handleExportProgress = (progress) => {
+    // console.log(`Export progress: ${progress.ratio * 100}%`);
+    // 当进度到达 100% 时，触发保存事件。
+    if (progress.ratio == 1) {
+        // 对于浏览器环境，ExportPDF 插件中已实现调用保存文件的窗口
+        if (window.__TAURI_INTERNALS__ === undefined) {
+            return;
+        }
+        // 非浏览器环境（tauri 环境）需要主动调用系统 API，调出对话框并保存文件
+        if (editorState.pdfIns !== null) {
+            emit('exportPDF', editorState.pdfIns.output('arraybuffer'));
+        }
+    }
+};
+
 const publish = () => {
     // TODO 调用接口将 markdown 源码或者 HTML 代码发布到云端
     Message.warning('抱歉，该功能暂未开放');