Merge pull request #49 from 2AMDevs/fix-printing-issue

Fix Printing Stuff

.gitignore

@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+public/print.pdf

craco.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  webpack: {
+    configure: {
+      target: 'electron-renderer',
+    },
+  },
+}

package.json

@@ -1,12 +1,15 @@
 {
   "name": "invoicify",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "2AM Devs",
   "description": "Digitalizes your billing process",
   "private": true,
   "main": "./public/electron.js",
   "build": {
     "appId": "invoicify.2am",
+    "extraResources": [
+      "./public/**"
+    ],
     "win": {
       "icon": "./public/icon.png"
     },
@@ -17,6 +20,7 @@
   },
   "homepage": "./",
   "dependencies": {
+    "@craco/craco": "^5.6.4",
     "@pdf-lib/fontkit": "^1.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -28,16 +32,18 @@
     "node-sass": "^4.14.1",
     "office-ui-fabric-react": "^7.121.7",
     "pdf-lib": "^1.9.0",
+    "pdf-to-printer": "^1.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-pdf": "5.0.0-beta.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {
-    "react-start": "react-scripts start",
-    "react-build": "react-scripts build",
-    "react-test": "react-scripts test",
-    "react-eject": "react-scripts eject",
+    "react-start": "craco start",
+    "react-build": "craco build",
+    "react-test": "craco test",
+    "react-eject": "craco eject",
     "electron-build": "electron-builder",
     "build": "npm run react-build && npm run electron-build",
     "lint": "node_modules/eslint/bin/eslint.js src/**/*.js --fix",
@@ -63,8 +69,9 @@
   },
   "devDependencies": {
     "concurrently": "^5.2.0",
-    "electron": "^9.0.5",
+    "electron": "8.4.1",
     "electron-builder": "^22.7.0",
+    "electron-reload": "^1.5.0",
     "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.2.0",
     "wait-on": "^5.0.1"

public/electron.js

@@ -1,10 +1,19 @@
 const path = require('path')
 
 const {
-  app, BrowserWindow, Menu, screen,
+  app, BrowserWindow, Menu, screen, ipcMain,
 } = require('electron')
 const isDev = require('electron-is-dev')
 
+const { print } = require('./printPdf')
+
+if (isDev) {
+  // eslint-disable-next-line global-require
+  require('electron-reload')(__dirname, {
+    electron: path.join(process.cwd(), 'node_modules', '.bin', 'electron.cmd'),
+  })
+}
+
 const createWindow = () => {
   Menu.setApplicationMenu(null)
   const { width, height } = screen.getPrimaryDisplay().workAreaSize
@@ -16,6 +25,7 @@ const createWindow = () => {
     webPreferences: {
       nodeIntegration: true,
       devTools: !!isDev,
+      plugins: true,
     },
   })
 
@@ -32,6 +42,7 @@ const createWindow = () => {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
+app.allowRendererProcessReuse = true
 app.whenReady().then(createWindow)
 
 // Quit when all windows are closed, except on macOS. There, it's common
@@ -53,3 +64,7 @@ app.on('activate', () => {
 
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
+ipcMain.on('print-it', (event, pdfBytes) => {
+  event.preventDefault()
+  print(pdfBytes)
+})

public/printPdf.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-console */
+const fs = require('fs')
+const os = require('os')
+const path = require('path')
+
+const ptp = require('pdf-to-printer')
+
+const print = (pdfBytes) => {
+  const filePath = path.join(os.tmpdir(), 'print.pdf')
+  fs.writeFile(filePath, pdfBytes, () => {})
+  ptp
+    .print(filePath, { win32: ['-print-settings "2x"'] })
+    .then(console.log)
+    .catch(console.error)
+}
+
+module.exports = {
+  print,
+}

src/components/Invoice/index.js

@@ -158,10 +158,6 @@ const Invoice = ({ setPreview }) => {
           />
         </Stack>
       </Stack>
-      <iframe
-        title="Hidden"
-        id="hidden-frame"
-      />
     </div>
   )
 }

src/index.scss

@@ -41,10 +41,6 @@ code {
     monospace;
 }
 
-#hidden-frame {
-  display: none
-}
-
 // keyframes animations and classes
 @keyframes slideUp {
   0% {

src/pages/HomePage/index.js

@@ -2,9 +2,12 @@ import './index.scss'
 import React, { useState } from 'react'
 
 import { Stack } from 'office-ui-fabric-react/lib/Stack'
+import { pdfjs, Document, Page } from 'react-pdf'
 
 import { Invoice } from '../../components'
 
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
+
 const deviceWidth = document.documentElement.clientWidth
 const columnProps = {
   tokens: { childrenGap: deviceWidth * 0.07 },
@@ -27,15 +30,14 @@ const HomePage = () => {
         />
         {preview?.length
           ? (
-            <iframe
-              title="Invoice Preview"
-              id="invoice-preview"
-              name="invoice-preview"
-              width="380"
-              height="550"
-              border="0"
-              src={preview}
-            />
+            <Document
+              file={{ data: preview }}
+            >
+              <Page
+                pageNumber={1}
+                scale={0.65}
+              />
+            </Document>
           ) : (
             <div className="preview-area">
               <div>Invoice Preview</div>

src/utils/helper.js

@@ -46,15 +46,9 @@ const initializeSettings = () => {
 }
 
 const printPDF = (pdfBytes) => {
-  const blob = new Blob([pdfBytes], { type: 'application/pdf' })
-  const blobUrl = window.URL.createObjectURL(blob)
-  const iframeEle = document.getElementById('hidden-frame')
-  iframeEle.src = blobUrl
-  setTimeout(() => {
-    if (iframeEle) {
-      iframeEle.contentWindow.print()
-    }
-  }, 500)
+  // eslint-disable-next-line global-require
+  const { ipcRenderer } = require('electron')
+  ipcRenderer.send('print-it', pdfBytes)
 }
 
 const getInvoiceDate = (date) => {
@@ -193,7 +187,7 @@ const getPdf = async (invoiceDetails, mode = PRINT) => {
   pdfDoc.setAuthor('2AM Devs')
 
   // Serialize the PDFDocument to base64
-  return mode === PREVIEW ? pdfDoc.saveAsBase64({ dataUri: true }) : pdfDoc.save()
+  return pdfDoc.save()
 }
 
 const generateUuid4 = () => ('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {