如何在 ElectronJS 中打印 DIV
Posted
技术标签:
【中文标题】如何在 ElectronJS 中打印 DIV【英文标题】：How to print a DIV in ElectronJS 【发布时间】：2016-10-04 06:27:14 【问题描述】：我正在尝试将我的网络转换为使用 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="stylesheet" type="text/css" href="styles/main.css" type=\"text/css\" media=\"print\" /></head><body onload="window.print()">' + printContents + '</body></html>');
popupWin.document.close();
用 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 吗？
感谢您的阅读。
【问题讨论】：
github.com/electron/electron-api-demos 您可以创建一个不可见的空白窗口，从主进程接收信号（html 字符串），然后打印 pdf。 我见过，但这只是创建一个pdf？或者也发送打印命令？ 抱歉回复晚了，你知道了吗？ 我以前看过，但不能很好地打印 pdf，仍然得到损坏的文件。是否有任何关于在 electronjs 上打印和 pdf 的完整文档？谢谢你的回答 【参考方案1】：这可能有点晚了，但是对于其他想要在电子中打印 div 的人，我建议您使用 range 对象选择您的 div，然后使用主进程打印 pdf，并将 printSelectionOnly 设置为 true。
渲染器进程中的JS：
function printDivToPDF(id)
let element = document.getElementById(id);
let range = new Range();
range.setStart(element, 0);
range.setEndAfter(element, 0);
document.getSelection().removeAllRanges();
document.getSelection().addRange(range);
ipcRenderer.send('exportSelectionToPDF');
主进程中的Js：
ipcMain.on('exportSelectionToPDF', (event) =>
let window = BrowserWindow.fromWebContents(e.sender);
window.webContents.printToPDF( printSelectionOnly: true, ).then((data) =>
// Use the data however you like :)
);
);
【讨论】：
【参考方案2】：您在加载完成之前已打印此页。
我的方法： 1. 创建一个主窗口和一个（不可见的）工作窗口
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().then((data)
fs.writeFile(pdfPath, data, function (error)
if (error)
throw error
shell.openItem(pdfPath)
event.sender.send('wrote-pdf', pdfPath)
)
).catch((error) =>
throw error;
)
);
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>
【讨论】：
非常感谢，这对我帮助很大。但我有几个问题。而不是printToPdf()，它只适用于print() ??
它们不是一回事。 print() 与打印机一起使用。 @PauloGaldoSandoval
这仍然像一个魅力。我的问题是我要打印到 PDF 的内容是通过 CSS 设置样式的。尽管在隐藏窗口中，一旦我创建了 pdf 文件，内容就会显示得非常好，所有样式都在文件中消失了。有没有人可以解决我在创建 pdf 时如何保持我的样式？
在使用您的代码时出现了很多问题。在工作窗口控制台中，它显示“不允许加载本地资源：file://src/main/worker.html”我使用以下代码解决了它workerWindow = new BrowserWindow( show: true, webPreferences: webSecurity: false , protocol: 'file', // parent:mainWindow ); workerWindow.loadURL(process.env.NODE_ENV === 'development' ? localhost:9080/static/assets/worker.html`：file://$__dirname/worker.html); ` 而且我必须将 worker.html 文件放在静态文件夹中
好久没用electron了。如果你成功了，请编辑这个答案。 @AnynameDonotcare【参考方案3】：
谢谢，也可以使用 print() 进行打印
ipcMain.on('print', (event, content) =>
workerWindow.webContents.send('print', content);
);
ipcMain.on('readyToPrint', (event) =>
workerWindow.webContents.print();
);
（事件被相应地重命名）
【讨论】：
以上是关于如何在 ElectronJS 中打印 DIV的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Electronjs 中为 web 视图添加前进和刷新按钮？