✨ show & export for PPT

 #8

src/assets/styles/common.scss

@@ -17,6 +17,7 @@ a {
 html,
 body {
   font-size: 14px;
+  background-color: #ffffff !important;
 }
 // export page css
 .export-page {

src/config/constant.js

@@ -5,7 +5,8 @@ export const appTitle = 'Arya - 在线 Markdown 编辑器'
 export const exportTextMap = {
   '/export/png': '导出 PNG',
   '/export/jpeg': '导出 JPEG',
-  '/export/pdf': '导出 PDF'
+  '/export/pdf': '导出 PDF',
+  '/export/ppt': '导出 PPT'
 }
 
 export const toolbarConf = [

src/pages/ExportPPT.vue

@@ -0,0 +1,99 @@
+<!-- @format -->
+
+<template>
+  <div class="export-ppt">
+    <div class="reveal">
+      <div class="slides">
+        <section data-markdown data-separator="---" data-separator-vertical="--">
+          <section data-template>
+            {{ savedMdContent }}
+          </section>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vditor from 'vditor'
+import Reveal from 'reveal.js/js/reveal'
+import 'reveal.js/css/reset.css'
+import 'reveal.js/css/reveal.css'
+import 'reveal.js/css/theme/beige.css'
+
+export default {
+  name: 'export-ppt',
+
+  data() {
+    return {
+      savedMdContent: ''
+    }
+  },
+
+  created() {},
+
+  components: {},
+
+  mounted() {
+    this.savedMdContent = localStorage.getItem('vditorvditor')
+    this.initReveal()
+  },
+
+  methods: {
+    initReveal() {
+      window.Reveal = Reveal
+      const revealSourcePath = `https://cdn.bootcss.com/reveal.js/3.8.0/`
+      Reveal.initialize({
+        controls: true,
+        progress: true,
+        center: true,
+        hash: true,
+        transition: 'slide',
+        dependencies: [
+          {
+            src: `${revealSourcePath}/plugin/markdown/marked.js`,
+            condition: function() {
+              return !!document.querySelector('[data-markdown]')
+            }
+          },
+          {
+            src: `${revealSourcePath}/plugin/markdown/markdown.js`,
+            condition: function() {
+              return !!document.querySelector('[data-markdown]')
+            }
+          },
+          { src: `${revealSourcePath}/plugin/highlight/highlight.js`, async: true },
+          { src: `${revealSourcePath}/plugin/search/search.js`, async: true },
+          { src: `${revealSourcePath}/plugin/zoom-js/zoom.js`, async: true },
+          { src: `${revealSourcePath}/plugin/notes/notes.js`, async: true }
+        ]
+      })
+    },
+    exportAndDownloadPPT(element, filename) {},
+    /* ---------------------Callback Event--------------------- */
+    onBackToMainPage() {
+      this.$router.push('/')
+    },
+    onExportBtnClick() {
+      this.isLoading = true
+      const element = document.getElementsByClassName('vditor-preview')[0]
+      const filename = this.$utils.getExportFileName()
+      this.exportAndDownloadPPT(element, filename)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.export-ppt {
+  width: 100%;
+  .reveal {
+    font-size: 2em;
+    background-color: #ffffff;
+    height: calc(100vh - 60px);
+    h1 {
+      font-size: 2em !important;
+    }
+  }
+}
+</style>

src/pages/partials/HeaderNav.vue

@@ -47,6 +47,10 @@
               <icon class="dropdown-icon" name="download" />
               <span class="dropdown-text">{{ exportTextMap['/export/pdf'] }}</span>
             </el-dropdown-item>
+            <el-dropdown-item command="/export/ppt">
+              <icon class="dropdown-icon" name="download" />
+              <span class="dropdown-text">{{ exportTextMap['/export/ppt'] }}</span>
+            </el-dropdown-item>
             <el-dropdown-item command="export-html" disabled divided>
               <icon class="dropdown-icon" name="download" />
               <span class="dropdown-text">导出 HTML</span>

src/router/routes/main.js

@@ -30,6 +30,13 @@ export default [
           title: `导出 PDF | ${window.$appTitle}`
         },
         component: resolve => require(['@pages/ExportPdf'], resolve)
+      },
+      {
+        path: 'ppt',
+        meta: {
+          title: `导出 PPT | ${window.$appTitle}`
+        },
+        component: resolve => require(['@pages/ExportPPT'], resolve)
       }
     ]
   }