Ich würde gerne eine JPG-Datei aus meiner Electron JS-App drucken, aber es endete damit, dass ich sie einfach in einer H ⇐ JavaScript

[Anonymous]

Ergebnis drucken
Ich habe gerade eine einfache Photobox-Elektronen-App erstellt. Das druckbare Foto ist bereits im sessionPath mit dem Namen „photo_print.jpg“ festgelegt. Das Problem hierbei ist, dass die Druckfunktion fehlerhaft ist und das Ergebnis nicht die volle 4R-Größe (4 x 6 Zoll) aufweist. Aber es füllt nur die Hälfte der Seite. Was ist falsch? Ich möchte dafür sorgen, dass der Druckvorgang geräuschlos erfolgt, das bedeutet, dass es kein Popup gibt und die Druckeinstellungen immer gleich sind, sodass der Benutzer kein kompliziertes Popup sieht.
Ich habe das Problem bereits gefunden, win.webContents.print(), egal welche Seitengröße ich hier eingebe. Es wird immer im A4-Format gedruckt. Wie kann ich ein benutzerdefiniertes Format, insbesondere das 4R-Format, erstellen?

Code: Select all

export async function printPhoto({
sessionPath,
printerName,
}: {
sessionPath: string;
printerName: string;
}) {
const photoPath = path.join(sessionPath, "photo_print.jpg");

if (!fs.existsSync(photoPath)) {
throw new Error("photo_print.jpg not found");
}

const win = new BrowserWindow({
width: 600,
height: 900,
show: true,
webPreferences: {
contextIsolation: true,
nodeIntegration: false,
},
});

const templatePath = path.join(
process.env.VITE_PUBLIC!,
"print-templates",
"print-4r.html"
);

await win.loadFile(templatePath, {
query: {
src: `file://${photoPath}`,
},
});

await win.webContents.executeJavaScript(`
new Promise(resolve => {
const check = () => {
if (window.printReady) resolve();
else setTimeout(check, 50);
};
check();
});
`);

await new Promise((resolve, reject) => {
win.webContents.print(
{
silent: true,
printBackground: true,
deviceName: printerName,
margins: { marginType: "none" },
pageSize: {
width: 101600,
height: 152400,
},
},
(success, errorType) => {
if (!success) reject(new Error(errorType));
else resolve();
}
);
});

win.destroy();
}

Code: Select all

@page {
size: 4in 6in;
margin: 0;
}

html,
body {
width: 4in;
height: 6in;
margin: 0;
padding: 0;
overflow: hidden;
background: white;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}






const params = new URLSearchParams(location.search);
const img = document.getElementById("photo");

img.src = params.get("src");

img.onload = () => {
window.printReady = true;
};