2016-06-04 3 views
11

drucken Ich versuche, meine Bahn in eine App in ElectronJSWie ein DIV in ElectronJS

in meinem Web-i druckt mit einem Barcode ein div gemacht zu konvertieren. das funktioniert ganz gut, aber in electronjs kann ich das nicht erreichen.

ursprünglich würde ich diese Funktion

$scope.printDiv = function (divName) { 
    var printContents = document.getElementById(divName).innerHTML; 
    var popupWin = window.open('', '_blank', 'width=500,height=500'); 
    popupWin.document.open(); 
    popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="styles/main.css" type=\"text/css\" media=\"print\" /></head><body onload="window.print()">' + printContents + '</body></html>'); 
    popupWin.document.close(); 
} 

mit electronjs

ich weiß nicht verwenden, wie das Objekt zu übergeben zu drucken.

Ich versuche auch, eine PDF aus Inhalten zu generieren, die ich laden kann. aber die PDFs sind verfälscht

var windowPrint = require('electron').remote.BrowserWindow; 
    var fs = require('fs'); 
    var newWindow = new windowPrint({width: 800, height: 600, show: false}); 
    console.log(newWindow); 
    newWindow.loadURL('http://github.com'); 
    newWindow.show(); 
    newWindow.webContents.print({silent: true, printBackground: true}); 
    newWindow.webContents.printToPDF({printSelectionOnly : true, printBackground: true}, function (error, data) { 
     if (error) { 
      throw error; 
     } 
     console.log(error); 
     console.log(data); 
     fs.writeFile('print.pdf', function (data, error) { 
      if (error) { 
       throw error; 
      } 
      console.log(error); 
      console.log(data); 
     }); 
    }); 

gibt es eine einfache Möglichkeit, ein DIV mit electronjs zu drucken?

danke für das Lesen.

+0

https://github.com/electron/electron-api-demos Sie können ein unsichtbares leeres Fenster erstellen, die Signale (HTML string) aus dem Hauptprozess erhalten und dann druckt pdf. – Zen

+0

ich habe das gesehen, aber das nur ein pdf erstellen? oder senden Sie auch den Druckbefehl? –

+0

Entschuldigung für meine späte Antwort, hast du es herausgefunden? – Zen

Antwort

11

Sie haben diese Seite vor dem Laden ausgedruckt.

Mein Ansatz: 1. ein Hauptfenster erstellen und eine (unsichtbare) Arbeiter Fenster

import {app, BrowserWindow, Menu, ipcMain, shell} from "electron"; 
const os = require("os"); 
const fs = require("fs"); 
const path = require("path"); 

let mainWindow: Electron.BrowserWindow = undefined; 
let workerWindow: Electron.BrowserWindow = undefined; 

async function createWindow() { 

    mainWindow = new BrowserWindow(); 
    mainWindow.loadURL("file://" + __dirname + "/index.html"); 
    mainWindow.webContents.openDevTools(); 
    mainWindow.on("closed",() => { 
     // close worker windows later 
     mainWindow = undefined; 
    }); 

    workerWindow = new BrowserWindow(); 
    workerWindow.loadURL("file://" + __dirname + "/worker.html"); 
    // workerWindow.hide(); 
    workerWindow.webContents.openDevTools(); 
    workerWindow.on("closed",() => { 
     workerWindow = undefined; 
    }); 
} 

// retransmit it to workerWindow 
ipcMain.on("printPDF", (event: any, content: any) => { 
    console.log(content); 
    workerWindow.webContents.send("printPDF", content); 
}); 
// when worker window is ready 
ipcMain.on("readyToPrintPDF", (event) => { 
    const pdfPath = path.join(os.tmpdir(), 'print.pdf'); 
    // Use default printing options 
    workerWindow.webContents.printToPDF({}, function (error, data) { 
     if (error) throw error 
     fs.writeFile(pdfPath, data, function (error) { 
      if (error) { 
       throw error 
      } 
      shell.openItem(pdfPath) 
      event.sender.send('wrote-pdf', pdfPath) 
     }) 
    }) 
}); 

2, mainWindow.html

<head> 
</head> 
<body> 
    <button id="btn"> Save </button> 
    <script> 
     const ipcRenderer = require("electron").ipcRenderer; 

     // cannot send message to other windows directly https://github.com/electron/electron/issues/991 
     function sendCommandToWorker(content) { 
      ipcRenderer.send("printPDF", content); 
     } 

     document.getElementById("btn").addEventListener("click",() => { 
      // send whatever you like 
      sendCommandToWorker("<h1> hello </h1>"); 
     }); 
    </script> 
</body> 

3, worker.html

<head> </head> 
<body> 
    <script> 
     const ipcRenderer = require("electron").ipcRenderer; 

     ipcRenderer.on("printPDF", (event, content) => { 
      document.body.innerHTML = content; 

      ipcRenderer.send("readyToPrintPDF"); 
     }); 
    </script> 
</body> 
+0

Vielen Dank, das hilft mir sehr. aber ich habe ein paar Fragen. anstelle von 'printToPdf()' es wird nur mit 'print()' arbeiten? –

+0

Sie sind nicht das Gleiche. 'print()' wird mit einem Drucker verwendet. @PauloGaldoSandoval – Zen

+0

Ja, das ist, was ich versuche, zuerst zu erreichen, aber ein PDF drucken ist auch für mich funktional. aber ich sage, wenn ich auf diese Weise die PDF bekomme, kann ich den Druckbefehl senden. –

1

Danke, funktioniert zum Drucken mit Druck() auch

ipcMain.on('print', (event, content) => { 
    workerWindow.webContents.send('print', content); 
}); 

ipcMain.on('readyToPrint', (event) => { 
    workerWindow.webContents.print({}); 
}); 

(Ereignisse werden entsprechend umbenannt)

Verwandte Themen