Fix pdf saving

Author: Rokt33r

src/components/organisms/NotePageToolbar.tsx

@@ -216,9 +216,6 @@ const NotePageToolbar = ({
                 note,
                 preferences,
                 pushMessage,
-                {
-                  includeFrontMatter,
-                },
                 previewStyle
               ),
           },

src/lib/electronOnly.ts

@@ -6,6 +6,7 @@ import {
   MenuItemConstructorOptions,
   IpcRendererEvent,
   WebContents,
+  PrintToPDFOptions,
 } from 'electron'
 
 const __ELECTRON_ONLY__: {
@@ -46,6 +47,10 @@ const __ELECTRON_ONLY__: {
   isDefaultProtocolClient(protocol: string): boolean
   getWebContentsById(id: number): WebContents
   setTrafficLightPosition(position: { x: number; y: number }): void
+  convertHtmlStringToPdfBlob(
+    htmlString: string,
+    printOptions: PrintToPDFOptions
+  ): Promise<Blob>
 } = (window as any).__ELECTRON_ONLY__
 
 const {
@@ -72,6 +77,7 @@ const {
   isDefaultProtocolClient,
   getWebContentsById,
   setTrafficLightPosition,
+  convertHtmlStringToPdfBlob,
 } = __ELECTRON_ONLY__ || {}
 
 async function readFileAsString(pathname: string) {
@@ -123,4 +129,5 @@ export {
   isDefaultProtocolClient,
   getWebContentsById,
   setTrafficLightPosition,
+  convertHtmlStringToPdfBlob,
 }

src/lib/exports.ts

@@ -20,8 +20,9 @@ import rehypeReact from 'rehype-react'
 import CodeFence from '../components/atoms/markdown/CodeFence'
 import { getGlobalCss, selectTheme } from './styled/styleUtil'
 import yaml from 'yaml'
+import { convertHtmlStringToPdfBlob } from './electronOnly'
 
-const filenamifyNoteTitle = function (noteTitle: string): string {
+export function filenamifyNoteTitle(noteTitle: string): string {
   return filenamify(noteTitle.toLowerCase().replace(/\s+/g, '-'))
 }
 
@@ -192,99 +193,59 @@ export const exportNoteAsPdfFile = async (
   note: NoteDoc,
   preferences: Preferences,
   pushMessage: (context: any) => any,
-  { includeFrontMatter }: { includeFrontMatter: boolean },
   previewStyle?: string
 ): Promise<void> => {
-  await unified()
-    .use(remarkParse)
-    .use(remarkEmoji, { emoticon: false })
-    .use([remarkRehype, { allowDangerousHTML: true }])
-    .use(rehypeRaw)
-    .use(rehypeSanitize, schema)
-    .use(remarkMath)
-    .use(rehypeCodeMirror, {
-      ignoreMissing: true,
-      theme: preferences['markdown.codeBlockTheme'],
-    })
-    .use(rehypeKatex, { output: 'htmlAndMathml' })
-    .use(rehypeReact, {
-      createElement: React.createElement,
-      components: {
-        pre: CodeFence,
-      },
-    })
-    .use(rehypeStringify)
-    .process(note.content, (err, file) => {
-      if (err != null) {
-        pushMessage({
-          title: 'Note processing failed',
-          description: 'Please check markdown syntax and try again later.',
-        })
-        return
-      }
-
-      const stringifiedMdContent = file.toString().trim() + '\n'
-      const { BrowserWindow } = window.require('electron').remote
-      const windowOptions = {
-        webPreferences: {
-          nodeIntegration: true,
-          webSecurity: false,
-          javascript: false,
+  try {
+    const output = await unified()
+      .use(remarkParse)
+      .use(remarkEmoji, { emoticon: false })
+      .use([remarkRehype, { allowDangerousHTML: true }])
+      .use(rehypeRaw)
+      .use(rehypeSanitize, schema)
+      .use(remarkMath)
+      .use(rehypeCodeMirror, {
+        ignoreMissing: true,
+        theme: preferences['markdown.codeBlockTheme'],
+      })
+      .use(rehypeKatex, { output: 'htmlAndMathml' })
+      .use(rehypeReact, {
+        createElement: React.createElement,
+        components: {
+          pre: CodeFence,
         },
-        show: false,
-      }
-      const win = new BrowserWindow(windowOptions)
-      const htmlStr = generatePrintToPdfHTML(
-        stringifiedMdContent,
-        preferences,
-        previewStyle
-      )
-      const encodedStr = encodeURIComponent(htmlStr)
-      win.loadURL('data:text/html;charset=UTF-8,' + encodedStr)
-      win.webContents.on('did-finish-load', function () {
-        // Enable when newer version of electron is available
-        const tagsStr =
-          note.tags.length > 0 ? `, tags: [${note.tags.join(' ')}]` : ''
-        const headerFooter: Record<string, string> = {
-          title: `${note.title}${tagsStr}`,
-          url: `file://${filenamifyNoteTitle(note.title)}.pdf`,
-        }
-        const printOpts = {
-          // Needed for codemirorr themes (backgrounds)
-          printBackground: true,
-          // Enable margins if header footer is printed
-          // No margins 1, default margins 0, 2 - minimum margins
-          marginsType: includeFrontMatter ? 0 : 1,
-          pageSize: 'A4', // This could be chosen by user,
-          headerFooter: includeFrontMatter ? headerFooter : undefined,
-        }
-        win.webContents
-          .printToPDF(printOpts)
-          .then((data) => {
-            if (data) {
-              // We got the PDF - offer the user to save it
-              const pdfName = `${filenamifyNoteTitle(note.title)}.pdf`
-              const pdfBlob = new Blob([data], {
-                type: 'application/pdf', // application/octet-stream
-              })
-              downloadBlob(pdfBlob, pdfName)
-            } else {
-              pushMessage({
-                title: 'PDF export failed',
-                description: 'Please try again later. Reason: Unknown',
-              })
-            }
-            // Destroy window (not shown but disposes it)
-            win.destroy()
-          })
-          .catch((err) => {
-            pushMessage({
-              title: 'PDF export failed',
-              description: 'Please try again later.' + (err ? err : 'Unknown'),
-            })
-          })
       })
-      return
+      .use(rehypeStringify)
+      .process(note.content)
+    const markdownContent = output.toString('utf-8').trim() + '\n'
+    const htmlString = generatePrintToPdfHTML(
+      markdownContent,
+      preferences,
+      previewStyle
+    )
+
+    // Enable when newer version of electron is available
+    // const tagsStr =
+    //   note.tags.length > 0 ? `, tags: [${note.tags.join(' ')}]` : ''
+    // const headerFooter: Record<string, string> = {
+    //   title: `${note.title}${tagsStr}`,
+    //   url: `file://${filenamifyNoteTitle(note.title)}.pdf`,
+    // }
+    const printOpts = {
+      // Needed for codemirorr themes (backgrounds)
+      printBackground: true,
+      // Enable margins if header footer is printed
+      // No margins 1, default margins 0, 2 - minimum margins
+      // marginsType: includeFrontMatter ? 0 : 1,
+      pageSize: 'A4', // This could be chosen by user,
+      // headerFooter: includeFrontMatter ? headerFooter : undefined,
+    }
+    const pdfBlob = await convertHtmlStringToPdfBlob(htmlString, printOpts)
+    const pdfName = `${filenamifyNoteTitle(note.title)}.pdf`
+    downloadBlob(pdfBlob, pdfName)
+  } catch (error) {
+    pushMessage({
+      title: 'PDF export failed',
+      description: error.message,
     })
-  return
+  }
 }

static/boosthub-preload.js

@@ -1,8 +1,42 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { ipcRenderer } = require('electron')
+const { ipcRenderer, remote } = require('electron')
 
 function sendToHost(channel, ...args) {
   ipcRenderer.sendToHost(channel, ...args)
 }
+
+function convertHtmlStringToPdfBlob(htmlString, printOptions) {
+  return new Promise((resolve, reject) => {
+    const encodedStr = encodeURIComponent(htmlString)
+    const { BrowserWindow } = remote
+    const windowOptions = {
+      webPreferences: {
+        nodeIntegration: false,
+        webSecurity: false,
+        javascript: false,
+      },
+      show: false,
+    }
+    const browserWindow = new BrowserWindow(windowOptions)
+    browserWindow.loadURL('data:text/html;charset=UTF-8,' + encodedStr)
+
+    browserWindow.webContents.on('did-finish-load', async () => {
+      try {
+        const pdfFileBuffer = await browserWindow.webContents.printToPDF(
+          printOptions
+        )
+        const blob = new Blob([pdfFileBuffer], {
+          type: 'application/pdf',
+        })
+        resolve(blob)
+      } catch (error) {
+        reject(error)
+      } finally {
+        browserWindow.destroy()
+      }
+    })
+  })
+}
 window.__ELECTRON_ONLY__ = {}
 window.__ELECTRON_ONLY__.sendToHost = sendToHost
+window.__ELECTRON_ONLY__.convertHtmlStringToPdfBlob = convertHtmlStringToPdfBlob

static/main-preload.js

@@ -157,6 +157,39 @@
     electron.remote.getCurrentWindow().setTrafficLightPosition(position)
   }
 
+  function convertHtmlStringToPdfBlob(htmlString, printOptions) {
+    return new Promise((resolve, reject) => {
+      const encodedStr = encodeURIComponent(htmlString)
+      const { BrowserWindow } = remote
+      const windowOptions = {
+        webPreferences: {
+          nodeIntegration: false,
+          webSecurity: false,
+          javascript: false,
+        },
+        show: false,
+      }
+      const browserWindow = new BrowserWindow(windowOptions)
+      browserWindow.loadURL('data:text/html;charset=UTF-8,' + encodedStr)
+
+      browserWindow.webContents.on('did-finish-load', async () => {
+        try {
+          const pdfFileBuffer = await browserWindow.webContents.printToPDF(
+            printOptions
+          )
+          const blob = new Blob([pdfFileBuffer], {
+            type: 'application/pdf',
+          })
+          resolve(blob)
+        } catch (error) {
+          reject(error)
+        } finally {
+          browserWindow.destroy()
+        }
+      })
+    })
+  }
+
   window.__ELECTRON_ONLY__ = {}
   window.__ELECTRON_ONLY__.openExternal = openExternal
   window.__ELECTRON_ONLY__.readFile = readFile