feat: allow SPA to download PDF

Author: antfu

package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.6.4",
     "@antfu/utils": "^0.1.1",
+    "@types/file-saver": "^2.0.2",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.1",
     "@types/prettier": "^2.2.3",

packages/client/internals/NavControls.vue

@@ -4,6 +4,7 @@ import { computed, defineProps } from 'vue'
 import { isDark, toggleDark } from '../logic/dark'
 import { hasNext, hasPrev, prev, next, isPresenter, currentPage } from '../logic/nav'
 import { showOverview, showEditor } from '../state'
+import { configs } from '../env'
 import RecordingControls from './RecordingControls.vue'
 
 defineProps({
@@ -16,6 +17,11 @@ const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(document.body)
 
 const presenterLink = computed(() => `${location.origin}/presenter/${currentPage.value}`)
 const nonPresenterLink = computed(() => `${location.origin}/${currentPage.value}`)
+
+function downloadPDF() {
+  import('file-saver')
+    .then(i => i.saveAs(`${import.meta.env.BASE_URL}slidev-exported.pdf`, `${configs.title}.pdf`))
+}
 </script>
 
 <template>
@@ -60,5 +66,10 @@ const nonPresenterLink = computed(() => `${location.origin}/${currentPage.value}
 
       <RecordingControls v-if="!isPresenter" />
     </template>
+    <template v-else>
+      <button v-if="configs.allowDownload" class="icon-btn" @click="downloadPDF">
+        <carbon:download />
+      </button>
+    </template>
   </nav>
 </template>

packages/client/package.json

@@ -17,6 +17,7 @@
     "@vueuse/core": "^4.9.0",
     "@vueuse/head": "^0.5.1",
     "codemirror": "^5.61.0",
+    "file-saver": "^2.0.5",
     "js-base64": "^3.6.0",
     "js-yaml": "^3.14.1",
     "monaco-editor": "^0.23.0",

packages/slidev/node/build.ts

@@ -1,9 +1,13 @@
 import { promises as fs } from 'fs'
-import { resolve } from 'path'
-import { build as viteBuild, InlineConfig, mergeConfig } from 'vite'
+import { resolve, join } from 'path'
+import http from 'http'
+import { build as viteBuild, InlineConfig, mergeConfig, ResolvedConfig } from 'vite'
+import connect from 'connect'
+import sirv from 'sirv'
 import { ViteSlidevPlugin } from './plugins/preset'
 import { getIndexHtml } from './common'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from './plugins/options'
+import { exportSlides } from './export'
 
 export async function build(
   options: ResolvedSlidevOptions,
@@ -12,13 +16,21 @@ export async function build(
 ) {
   const indexPath = resolve(options.userRoot, 'index.html')
   await fs.writeFile(indexPath, await getIndexHtml(options), 'utf-8')
+  let config: ResolvedConfig = undefined!
+
   try {
     await viteBuild(
       mergeConfig(
         viteConfig,
         <InlineConfig>({
           plugins: [
             ViteSlidevPlugin(options, pluginOptions),
+            {
+              name: 'resolve-config',
+              configResolved(_config) {
+                config = _config
+              },
+            },
           ],
         }),
       ),
@@ -27,4 +39,25 @@ export async function build(
   finally {
     await fs.unlink(indexPath)
   }
+
+  if (options.data.config.allowDownload) {
+    const port = 12445
+    const app = connect()
+    const server = http.createServer(app)
+    app.use(
+      config.base,
+      sirv(config.build.outDir, {
+        etag: true,
+        single: true,
+      }),
+    )
+    server.listen(port)
+    await exportSlides({
+      port,
+      total: options.data.slides.length,
+      format: 'pdf',
+      output: join(config.build.outDir, 'slidev-exported.pdf'),
+    })
+    server.close()
+  }
 }

packages/slidev/node/parser.ts

@@ -120,6 +120,7 @@ export function parse(
   config.title ??= headmatter.title ?? (slides[0].content.match(/^# (.*)$/m)?.[1] || '').trim()
   config.remoteAssets ??= headmatter.remoteAssets ?? true
   config.monaco ??= headmatter.monaco ?? 'dev'
+  config.allowDownload ??= headmatter.allowDownload ?? true
 
   return {
     raw: markdown,

packages/slidev/node/plugins/preset.ts

@@ -144,7 +144,7 @@ export function ViteSlidevPlugin(
             ext: '.png',
           },
         ],
-        resolveMode: '@fs',
+        resolveMode: id => id.endsWith('index.html') ? 'relative' : '@fs',
         awaitDownload: mode === 'build',
         ...remoteAssetsOptions,
       })

packages/slidev/package.json

@@ -52,6 +52,7 @@
     "@vue/compiler-sfc": "^3.0.11",
     "cli-progress": "^3.9.0",
     "codemirror": "^5.61.0",
+    "connect": "^3.7.0",
     "enquirer": "^2.3.6",
     "fast-glob": "^3.2.5",
     "fs-extra": "^9.1.0",
@@ -63,6 +64,7 @@
     "markdown-it-prism": "^2.1.6",
     "monaco-editor": "^0.23.0",
     "pdf-lib": "^1.16.0",
+    "sirv": "^1.0.11",
     "vite": "^2.2.3",
     "vite-plugin-components": "^0.8.4",
     "vite-plugin-icons": "^0.5.0",
@@ -78,6 +80,7 @@
     "@antfu/ni": "^0.5.8",
     "@types/cli-progress": "^3.9.1",
     "@types/codemirror": "^0.0.109",
+    "@types/connect": "^3.4.34",
     "@types/fs-extra": "^9.0.11",
     "@types/js-yaml": "^3",
     "@types/markdown-it": "^12.0.1",

packages/types/types.d.ts

@@ -25,6 +25,10 @@ export interface SlidevConfig {
    * @defult 'dev'
    */
   monaco: boolean | 'dev'
+  /**
+   * @default true
+   */
+  allowDownload: boolean
 }
 
 export interface SlidevMarkdown {