Merge pull request #2678 from AgentEpsilon/export-pdf

Export a Markdown note as PDF
2025-12-13 09:46:22 +00:00 · 2019-03-21 01:20:12 +09:00
parent 9f13645127 2a0906d88e
commit 2b29d96d61
30 changed files with 131 additions and 63 deletions
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -208,6 +208,7 @@ export default class MarkdownPreview extends React.Component {
    this.saveAsTextHandler = () => this.handleSaveAsText()
    this.saveAsMdHandler = () => this.handleSaveAsMd()
    this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
+    this.saveAsPdfHandler = () => this.handleSaveAsPdf()
    this.printHandler = () => this.handlePrint()

    this.linkClickHandler = this.handleLinkClick.bind(this)
@@ -297,58 +298,77 @@ export default class MarkdownPreview extends React.Component {
    this.exportAsDocument('md')
  }

-  handleSaveAsHtml () {
-    this.exportAsDocument('html', (noteContent, exportTasks) => {
-      const {
-        fontFamily,
-        fontSize,
-        codeBlockFontFamily,
-        lineNumber,
-        codeBlockTheme,
-        scrollPastEnd,
-        theme,
-        allowCustomCSS,
-        customCSS
-      } = this.getStyleParams()
+  htmlContentFormatter (noteContent, exportTasks, targetDir) {
+    const {
+      fontFamily,
+      fontSize,
+      codeBlockFontFamily,
+      lineNumber,
+      codeBlockTheme,
+      scrollPastEnd,
+      theme,
+      allowCustomCSS,
+      customCSS
+    } = this.getStyleParams()

-      const inlineStyles = buildStyle(
-        fontFamily,
-        fontSize,
-        codeBlockFontFamily,
-        lineNumber,
-        scrollPastEnd,
-        theme,
-        allowCustomCSS,
-        customCSS
-      )
-      let body = this.markdown.render(noteContent)
-      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
-      files.forEach(file => {
-        if (global.process.platform === 'win32') {
-          file = file.replace('file:///', '')
-        } else {
-          file = file.replace('file://', '')
-        }
-        exportTasks.push({
-          src: file,
-          dst: 'css'
+    const inlineStyles = buildStyle(
+      fontFamily,
+      fontSize,
+      codeBlockFontFamily,
+      lineNumber,
+      scrollPastEnd,
+      theme,
+      allowCustomCSS,
+      customCSS
+    )
+    let body = this.markdown.render(noteContent)
+    const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+    files.forEach(file => {
+      if (global.process.platform === 'win32') {
+        file = file.replace('file:///', '')
+      } else {
+        file = file.replace('file://', '')
+      }
+      exportTasks.push({
+        src: file,
+        dst: 'css'
+      })
+    })
+
+    let styles = ''
+    files.forEach(file => {
+      styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
+    })
+
+    return `<html>
+               <head>
+                 <base href="file://${targetDir}/">
+                 <meta charset="UTF-8">
+                 <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
+                 <style id="style">${inlineStyles}</style>
+                 ${styles}
+               </head>
+               <body>${body}</body>
+            </html>`
+  }
+
+  handleSaveAsHtml () {
+    this.exportAsDocument('html', (noteContent, exportTasks, targetDir) => Promise.resolve(this.htmlContentFormatter(noteContent, exportTasks, targetDir)))
+  }
+
+  handleSaveAsPdf () {
+    this.exportAsDocument('pdf', (noteContent, exportTasks, targetDir) => {
+      const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false}})
+      printout.loadURL('data:text/html;charset=UTF-8,' + this.htmlContentFormatter(noteContent, exportTasks, targetDir))
+      return new Promise((resolve, reject) => {
+        printout.webContents.on('did-finish-load', () => {
+          printout.webContents.printToPDF({}, (err, data) => {
+            if (err) reject(err)
+            else resolve(data)
+            printout.destroy()
+          })
        })
      })
-
-      let styles = ''
-      files.forEach(file => {
-        styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
-      })
-
-      return `<html>
-                 <head>
-                   <meta charset="UTF-8">
-                   <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
-                   <style id="style">${inlineStyles}</style>
-                   ${styles}
-                 </head>
-                 <body>${body}</body>
-              </html>`
    })
  }

@@ -490,6 +510,7 @@ export default class MarkdownPreview extends React.Component {
    eventEmitter.on('export:save-text', this.saveAsTextHandler)
    eventEmitter.on('export:save-md', this.saveAsMdHandler)
    eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
+    eventEmitter.on('export:save-pdf', this.saveAsPdfHandler)
    eventEmitter.on('print', this.printHandler)
  }

@@ -527,6 +548,7 @@ export default class MarkdownPreview extends React.Component {
    eventEmitter.off('export:save-text', this.saveAsTextHandler)
    eventEmitter.off('export:save-md', this.saveAsMdHandler)
    eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
+    eventEmitter.off('export:save-pdf', this.saveAsPdfHandler)
    eventEmitter.off('print', this.printHandler)
  }

--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -14,7 +14,7 @@ class InfoPanel extends React.Component {

  render () {
    const {
-      storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print
+      storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, exportAsPdf, wordCount, letterCount, type, print
    } = this.props
    return (
      <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
@@ -85,6 +85,11 @@ class InfoPanel extends React.Component {
            <p>{i18n.__('.html')}</p>
          </button>

+          <button styleName='export--enable' onClick={(e) => exportAsPdf(e, 'export-pdf')}>
+            <i className='fa fa-file-pdf-o' />
+            <p>{i18n.__('.pdf')}</p>
+          </button>
+
          <button styleName='export--enable' onClick={(e) => print(e, 'print')}>
            <i className='fa fa-print' />
            <p>{i18n.__('Print')}</p>
@@ -104,6 +109,7 @@ InfoPanel.propTypes = {
  exportAsMd: PropTypes.func.isRequired,
  exportAsTxt: PropTypes.func.isRequired,
  exportAsHtml: PropTypes.func.isRequired,
+  exportAsPdf: PropTypes.func.isRequired,
  wordCount: PropTypes.number,
  letterCount: PropTypes.number,
  type: PropTypes.string.isRequired,
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -15,7 +15,7 @@
  right 25px
  position absolute
  padding 20px 25px 0 25px
-  width 300px
+  // width 300px
  overflow auto
  background-color $ui-noteList-backgroundColor
  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
--- a/browser/main/Detail/InfoPanelTrashed.js
+++ b/browser/main/Detail/InfoPanelTrashed.js
@@ -5,7 +5,7 @@ import styles from './InfoPanel.styl'
 import i18n from 'browser/lib/i18n'

 const InfoPanelTrashed = ({
-  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
+  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, exportAsPdf
 }) => (
  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
    <div>
@@ -46,7 +46,7 @@ const InfoPanelTrashed = ({
        <p>.html</p>
      </button>

-      <button styleName='export--unable'>
+      <button styleName='export--enable' onClick={(e) => exportAsPdf(e, 'export-pdf')}>
        <i className='fa fa-file-pdf-o' />
        <p>.pdf</p>
      </button>
@@ -61,7 +61,8 @@ InfoPanelTrashed.propTypes = {
  createdAt: PropTypes.string.isRequired,
  exportAsMd: PropTypes.func.isRequired,
  exportAsTxt: PropTypes.func.isRequired,
-  exportAsHtml: PropTypes.func.isRequired
+  exportAsHtml: PropTypes.func.isRequired,
+  exportAsPdf: PropTypes.func.isRequired
 }

 export default CSSModules(InfoPanelTrashed, styles)
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -201,6 +201,10 @@ class MarkdownNoteDetail extends React.Component {
    ee.emit('export:save-html')
  }

+  exportAsPdf () {
+    ee.emit('export:save-pdf')
+  }
+
  handleKeyDown (e) {
    switch (e.keyCode) {
      // tab key
@@ -426,6 +430,7 @@ class MarkdownNoteDetail extends React.Component {
          exportAsHtml={this.exportAsHtml}
          exportAsMd={this.exportAsMd}
          exportAsTxt={this.exportAsTxt}
+          exportAsPdf={this.exportAsPdf}
        />
      </div>
    </div>
@@ -492,6 +497,7 @@ class MarkdownNoteDetail extends React.Component {
          exportAsMd={this.exportAsMd}
          exportAsTxt={this.exportAsTxt}
          exportAsHtml={this.exportAsHtml}
+          exportAsPdf={this.exportAsPdf}
          wordCount={note.content.split(' ').length}
          letterCount={note.content.replace(/\r?\n/g, '').length}
          type={note.type}
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -657,6 +657,7 @@ class SnippetNoteDetail extends React.Component {
      'export-txt': 'Text export',
      'export-md': 'Markdown export',
      'export-html': 'HTML export',
+      'export-pdf': 'PDF export',
      'print': 'Print'
    })[msg]

@@ -770,6 +771,7 @@ class SnippetNoteDetail extends React.Component {
          exportAsMd={this.showWarning}
          exportAsTxt={this.showWarning}
          exportAsHtml={this.showWarning}
+          exportAsPdf={this.showWarning}
        />
      </div>
    </div>
@@ -818,6 +820,7 @@ class SnippetNoteDetail extends React.Component {
          exportAsMd={this.showWarning}
          exportAsTxt={this.showWarning}
          exportAsHtml={this.showWarning}
+          exportAsPdf={this.showWarning}
          type={note.type}
          print={this.showWarning}
        />
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -496,6 +496,7 @@ class NoteList extends React.Component {
      'export-txt': 'Text export',
      'export-md': 'Markdown export',
      'export-html': 'HTML export',
+      'export-pdf': 'PDF export',
      'print': 'Print'
    })[msg]

--- a/browser/main/lib/dataApi/exportFolder.js
+++ b/browser/main/lib/dataApi/exportFolder.js
@@ -43,19 +43,18 @@ function exportFolder (storageKey, folderKey, fileType, exportDir) {
    .then(function exportNotes (data) {
      const { storage, notes } = data

-      notes
+      return Promise.all(notes
        .filter(note => note.folder === folderKey && note.isTrashed === false && note.type === 'MARKDOWN_NOTE')
-        .forEach(note => {
+        .map(note => {
          const notePath = path.join(exportDir, `${filenamify(note.title, {replacement: '_'})}.${fileType}`)
-          exportNote(note.key, storage.path, note.content, notePath, null)
+          return exportNote(note.key, storage.path, note.content, notePath, null)
        })
-
-      return {
+      ).then(() => ({
        storage,
        folderKey,
        fileType,
        exportDir
-      }
+      }))
    })
 }

--- a/browser/main/lib/dataApi/exportNote.js
+++ b/browser/main/lib/dataApi/exportNote.js
@@ -43,14 +43,17 @@ function exportNote (nodeKey, storageKey, noteContent, targetPath, outputFormatt
  )

  if (outputFormatter) {
-    exportedData = outputFormatter(exportedData, exportTasks)
+    exportedData = outputFormatter(exportedData, exportTasks, path.dirname(targetPath))
+  } else {
+    exportedData = Promise.resolve(exportedData)
  }

  const tasks = prepareTasks(exportTasks, storagePath, path.dirname(targetPath))

  return Promise.all(tasks.map((task) => copyFile(task.src, task.dst)))
-  .then(() => {
-    return saveToFile(exportedData, targetPath)
+  .then(() => exportedData)
+  .then(data => {
+    return saveToFile(data, targetPath)
  }).catch((err) => {
    rollbackExport(tasks)
    throw err