如何在ElectronJS中打印DIV

本文介绍了如何在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）
}）
}）
}）;

，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>

，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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！