如何在 ElectronJS 中打印 DIV
[英]How to print a DIV in ElectronJS
問題描述
我正在嘗試將我的網絡轉換為用 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();
}
與電子
我不知道如何傳遞對象進行打印。
我也在嘗試從我可以加載的內容生成 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的簡單方法嗎？
謝謝你的閱讀。
3 個解決方案
解決方案1
28 已采納 2016-06-11 07:10:36
您已在加載完成前打印此頁面。
我的方法： 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>
解決方案2
3 2017-07-04 20:35:04
謝謝，也適用於使用 print() 打印
ipcMain.on('print', (event, content) => {
workerWindow.webContents.send('print', content);
});
ipcMain.on('readyToPrint', (event) => {
workerWindow.webContents.print({});
});
（事件相應地重命名）
解決方案3
1 2021-03-24 15:56:12
這可能有點晚了，但是對於其他想要在電子中打印 div 的人，我建議您使用范圍對象選擇您的 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 :)
});
});
如何與 electronjs 同步數據庫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.