Electron + Vue.jsで画面をPDF化する手順

.
├── App.vue
├── assets
├── background.ts
├── components
├── main.ts
├── router.ts
├── shims-tsx.d.ts
├── shims-vue.d.ts
├── store.ts
└── views

.
├── App.vue
├── assets
├── background.js
├── components
├── main.js
├── router.js
├── store.js
└── views

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App !!"/>
     <button id='print-pdf' @click="createPDF()">Convert to PDF</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
import { ipcRenderer } from 'electron'

@Component({
  components: {
    HelloWorld
  }
})
export default class Home extends Vue {
  pdfname: string = "mypdf"
  // ボタンクリックでPDF作成をメインプロセスにリクエスト
  createPDF () {
    ipcRenderer.send('print-to-pdf', this.pdfname)
  }
  mounted () {
    // mountでメインプロセスからのIPC通信待機
    ipcRenderer.on('wrote-pdf', (event: any, path: any) => {
      const msg = `PDFを ${path} に作成しました。`
      console.log(msg)
    })
  }
}
</script>

'use strict'

import { app, protocol, BrowserWindow, ipcMain, shell } from 'electron'
import {
  createProtocol,
  installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
import fs from 'fs'
import os from 'os'
import path from 'path'

const isDevelopment = process.env.NODE_ENV !== 'production'

(...途中省略...)

// 以下追記
// PDF作成処理
ipcMain.on('print-to-pdf', (event: any, arg: any) => {
  // 作成するPDFの保存パスを指定
  const pdfPath = path.join(os.tmpdir(), arg + '.pdf')
  const win = BrowserWindow.fromWebContents(event.sender)

  // Electronデフォルトで使用できるprintToPDFを使用する
  win.webContents.printToPDF({}, (error, data) => {
    if (error) return console.log(error.message)

    fs.writeFile(pdfPath, data, err => {
      if (err) return console.log(err.message)
      shell.openExternal('file://' + pdfPath)
      event.sender.send('wrote-pdf', pdfPath)
    })
    
  })
});

// PDF作成処理
ipcMain.on('print-to-pdf', (event: any, arg: any) => {
  // 作成するPDFの保存パスを指定
  const pdfPath = path.join(os.tmpdir(), arg + '.pdf')
  const win = BrowserWindow.fromWebContents(event.sender)

  // printToPDFにオプションを渡す
  win.webContents.printToPDF({
      marginsType: 0,
      pageSize: 'A4',
      printBackground: false,
      printSelectionOnly: false,
      landscape: false
    }, (error, data) => {
    if (error) return console.log(error.message)

    fs.writeFile(pdfPath, data, err => {
      if (err) return console.log(err.message)
      shell.openExternal('file://' + pdfPath)
      event.sender.send('wrote-pdf', pdfPath)
    })
    
  })
});