programing

ElectronJS에서 DIV를 인쇄하는 방법

oldcodes 2023. 10. 21. 10:49
반응형

ElectronJS에서 DIV를 인쇄하는 방법

제 웹을 ElectronJS로 만든 앱으로 변환하려고 합니다.

내 웹에서 나는 바코드가 있는 디브를 인쇄합니다.이것은 꽤 잘 작동하지만, 전자js에서는 이것에 도달할 수 없습니다.

원래 나는 이 기능을 사용할 것입니다.

$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();
}

전자js로

인쇄할 개체를 전달하는 방법을 모릅니다.

또한 로드할 수 있는 컨텐츠로 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);
        });
    });

전자js로 DIV를 인쇄하는 간단한 방법이 있습니까?

읽어주셔서 감사합니다.

로딩이 완료되기 전에 이 페이지를 인쇄하였습니다.

나의 접근법: 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, mainWindows.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, 노동자.

<head> </head>
<body>
    <script>
        const ipcRenderer = require("electron").ipcRenderer;

        ipcRenderer.on("printPDF", (event, content) => {
            document.body.innerHTML = content;

            ipcRenderer.send("readyToPrintPDF");
        });
    </script>
</body>

감사합니다, 프린트()로도 인쇄 가능합니다.

ipcMain.on('print', (event, content) => {
    workerWindow.webContents.send('print', content);
});

ipcMain.on('readyToPrint', (event) => {
    workerWindow.webContents.print({});
});

(이에 따라 events 이름이 바뀝니다.)

이것은 아마 조금 늦었을 것입니다만, 디바인 전자를 인쇄하고 싶은 다른 사람들에게, 범위 객체를 사용하여 디바를 선택한 후, 주요 프로세스를 사용하여 printSelection과 함께 pdf를 인쇄하는 것을 추천합니다.사실일 뿐입니다.

렌더러 프로세스의 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 :)
    });
});

렌더러와 메인 프로세스 간에 통신을 시도하는 것일 수 있습니다.

Electron에서 제공하는 IPC call을 이용하여 Main process에서 Renderer로 메시지를 보낼 수 있으며, Callback 기능은 HTML 내부에 DOM 요소를 주입할 수 있습니다.

enter image description here

로딩이 완료되기 전에 이 페이지를 인쇄하였습니다.

나의 접근법: 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, mainWindows.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, 노동자.

<head> </head>
<body>
    <script>
        const ipcRenderer = require("electron").ipcRenderer;

        ipcRenderer.on("printPDF", (event, content) => {
            document.body.innerHTML = content;

            ipcRenderer.send("readyToPrintPDF");
        });
    </script>
</body>

언급URL : https://stackoverflow.com/questions/37627064/how-to-print-a-div-in-electronjs

반응형

'programing' 카테고리의 다른 글

PL/SQL에서 텍스트를 XML 호환 텍스트로 변환/인코딩하는 방법이 있습니까?  (0) 2023.10.21
Swift: 스위치 케이스의 옵션 값에 대한 테스트  (0) 2023.10.21
라디오 버튼을 기준으로 WooCommerce 체크아웃에서 항목 세율 변경  (0) 2023.10.21
Django - mysqlclient 오류 설치: mysqlclient 1.3.13 이상이 필요합니다. 0.9.3이 있습니다.  (0) 2023.10.21
IoC 컨테이너 및 종속성 주입 이해  (0) 2023.10.21

'programing'의 다른글

  • 현재글ElectronJS에서 DIV를 인쇄하는 방법

관련글

댓글

티스토리툴바