如何在ElectronJS中打印DIV [英] How to print a DIV in ElectronJS
本文介绍了如何在ElectronJS中打印DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正尝试将我的网络转换为ElectronJS中制作的应用程序。
在我的网页中打印带有条形码的div。这工作相当好，但在electronjs我无法达到此。
原本我会使用此功能
$ 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 =stylesheettype =text / csshref =styles / main.csstype = \text / css\media = \print\/>< / head>< body onload =window.print（）>'+ printContents +'< / body>< / html> ）;
popupWin.document.close（）;
}
with electronjs
我不知道如何传递对象来打印。
另外我试图从我可以加载的内容生成PDF。但PDF的损坏
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）;
}）;
}）;
使用electronjs打印DIV有一个简单的方法吗？
感谢您的阅读。
我的方法：
1.创建一个mainwindow和一个（不可见的）工作窗口
从electron导入{app，BrowserWindow，Menu，ipcMain，shell};
const os = require（os）;
const fs = require（fs）;
const path = require（path）;
让mainWindow：Electron.BrowserWindow = undefined;
让workerWindow：Electron.BrowserWindow = undefined;
异步函数createWindow（）{
mainWindow = new BrowserWindow（）;
mainWindow.loadURL（file：//+ __dirname +/index.html）;
mainWindow.webContents.openDevTools（）;
mainWindow.on（closed，（）=> {
//稍后关闭工作窗口
mainWindow = undefined;
}）;
workerWindow = new BrowserWindow（）;
workerWindow.loadURL（file：//+ __dirname +/worker.html）;
// workerWindow.hide（）;
workerWindow.webContents.openDevTools（）;
workerWindow.on（closed，（）=> {
workerWindow = undefined;
}）;
}
//重新发送给workerWindow
ipcMain.on（printPDF，（event：any，content：any）=> {
console。日志（内容）;
workerWindow.webContents.send（printPDF，content）;
}）;
//当工作窗口准备就绪时
ipcMain.on（readyToPrintPDF，（event）=> {
const pdfPath = path.join（os.tmpdir（），'print。 pdf'）;
//使用默认打印选项
workerWindow.webContents.printToPDF（{}，函数（错误，数据）{
if（错误）抛出错误
fs。 writeFile（pdfPath，data，function（error）{
if（error）{
throw error
}
shell.openItem（pdfPath）
event.sender.send （'writes-pdf'，pdfPath）
}）
}）
}）;
<2>，mainWindow.html
< HEAD>
< / head>
< body>
< button id =btn>保存< /按钮>
< script>
const ipcRenderer = require（electron）。ipcRenderer;
//不能直接发送消息到其他窗口https://github.com/electron/electron/issues/991
function sendCommandToWorker（content）{
ipcRenderer.send（ printPDF，内容）;
$ b document.getElementById（btn）。addEventListener（click，（）=> {
//发送任何你喜欢的东西
sendCommandToWorker < h1> hello< / h1>）;
}）;
< / script>
< / body>
<3>，worker.html
< HEAD> < /头>
< body>
< script>
const ipcRenderer = require（electron）。ipcRenderer;
$ b ipcRenderer.on（printPDF，（event，content）=> {
document.body.innerHTML = content;
ipcRenderer.send（ readyToPrintPDF）;
}）;
< / script>
< / body>
i'm trying to convert my web into an app made in ElectronJS
in my web i print a div with a barcode. this works pretty fine, but in electronjs i can't reach this.
originally i'd use this function
$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();
}
with electronjs
i don't know how to pass the object to print.
also i'm trying to generate a PDF from content that i can load. but the PDF's are corrupted
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);
});
});
there's a simple way to print a DIV with electronjs?
thank you for reading.
解决方案
You have printed this page before loading is finished.
My approach: 1. create a mainwindow and a (invisible) worker window
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>
这篇关于如何在ElectronJS中打印DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
