如何在 ElectronJS 中打印 DIV答案

【问题标题】：How to print a DIV in ElectronJS如何在 ElectronJS 中打印 DIV
【发布时间】：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 的完整文档？谢谢你的回答

标签： javascript html angularjs node.js electron

【解决方案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({});
});

（事件被相应地重命名）

【讨论】：