Javascript Electron js WebContent.print选项不工作（始终在A4页上打印）
我正在开发一个电影票务应用程序，当我打印票时，它总是打印在A4页上。我需要小页的票，而不是全尺寸的a4纸。我试图通过使用CSS来解决这个问题，但是页面大小的结果总是一样的 HTML模板Javascript Electron js WebContent.print选项不工作（始终在A4页上打印）,javascript,node.js,electron,desktop-application,Javascript,Node.js,Electron,Desktop Application,我正在开发一个电影票务应用程序，当我打印票时，它总是打印在A4页上。我需要小页的票，而不是全尺寸的a4纸。我试图通过使用CSS来解决这个问题，但是页面大小的结果总是一样的 HTML模板 data:text/html;charset=utf-8, <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name
data:text/html;charset=utf-8,
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Print Ticket</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<div style="width: 471px; height: 431px; padding-left: 20px; border-radius: 10px 10px 0 0; font-family: Helvetica; display: flex">
<div style=" width: 470px;">
<div style="display: flex;">
<div style="height: 80px">
<h1 style="border-bottom: 6px rgb(147, 47, 60) solid;">YABOUS TICKET</h1>
</div>
</div>
<div style="width: 470px; display: flex;">
<div style="max-width: 280px">
<div style="width: 310px; height: 70px; display: flex; justify-content: space-between;">
<div style="width:240px"> <span style="font-weight: 550; font-size: 20px">EVENT</span>
<br> <span style="font-size: 20px">%event%</span>
</div>
</div>
<div style="height: 70px; max-width: 290px">
<span style="font-weight: 550; font-size: 20px">HALL</span>
<br> <span style="font-size: 20px">%hall%</span>
</div>
<div style="height: 70px"> <span style="font-weight: 550; font-size: 20px">TICKET NO.</span><span style="font-weight: 550; font-size: 20px; margin-left: 90px;">PRICE</span>
<br> <span style="font-size: 20px">%seatNo%</span> <span style="font-size: 20px; margin-right: 35px; float: right">%ticketPrice%</span>
</div>
<div style="height: 90px; display: flex; align-items: flex-end">
<div style="width: 80px; height: 70px"> <span style="font-weight: 550; font-size: 15px">FLOOR</span>
<br> <span style="color: rgb(69, 68, 67); font-size: 25px"><b>%floor%</b></span>
</div>
<div style="width: 80px; height: 70px"> <span style="font-weight: 550; font-size: 15px">SEAT</span>
<br> <span style="color: rgb(69, 68, 67); font-size: 25px"><b>%seat%</b></span>
</div>
<div style="width: 80px; height: 70px"> <span style="font-weight: 550; font-size: 15px">ROW</span>
<br> <span style="color: rgb(69, 68, 67); font-size: 25px;"><b>%row%</b></span>
</div>
</div>
<div>
<span style="font-size: 11px; color: rgb(147, 47, 60)">GATE CLOSES 30 MINUTES BEFORE EVENT START</span>
</div>
</div>
<div style="width: 185px; display: flex; justify-content: center; flex-direction: column; padding-top: 30px">
<div style="display: flex; justify-content: center; width: 100%">
<div>
<span style="font-weight: 550; font-size: 16px">EVENT TIME</span>
<br>
<div style="display: flex;flex-direction: column;"> <span style="font-size: 25px"><b>%time%</b></span> <span style="color: rgb(69, 68, 67); font-size: 20px;">%date%</span> </div>
</div>
</div>
<div style="display: flex;justify-content: center; align-items: center; height: 200px"> <img src="%qrCode%" width="200"> </div>
</div>
</div>
</div>
</div>
<div style="width: 496px; height: 23px; background: rgb(147, 47, 60); border-radius: 0 0 10px 10px;color: white; font-family: Helvetica; display: flex; justify-content: space-between; padding-right: 12px; padding-left: 12px; font-size: 15px; padding-top: 5px; -webkit-print-color-adjust: exact; ">
<span>
<b>WWW.YABOUS.ORG</b>
</span>
<span>
<b>YABOUS</b>
</span>
</div>
</div>
</body>
const options = {
silent: false,
marginType: 1,
landscape: true,
pagesPerSheet: 1,
collate: true,
copies: 1,
printBackground: true,
pageSize: {
height: 454,
width: 471
}
}
let win2 = new BrowserWindow({
height: 454,
width: 471,
icon: __dirname + `/dist/storyteller/assets/favicon.ico`
});
win2.setMenu(null);
win2.loadURL(page);
// win2.webContents.reload();
// let win = BrowserWindow.getAllWindows()[0];
win2.webContents.on('did-finish-load', () => {
win2.webContents.print(options, (success, failureReason) => {
if (!success) console.log(failureReason);
console.log('Print Initiated');
});
})
我需要删除票据周围的空白，并使票据适合页面。根据Electron在上的文档，
pageSizeheight高度如果您没有能够在471mm x 454mm纸张上打印的专用打印机，我建议使用A4。如果您需要PDF格式的页面，只需参考上面链接的文档即可。而且，因为你似乎在编写某种票务软件：如果你为客户准备PDF文件，也要坚持使用A4，让客户将纸张折叠成所需的格式。这就是欧洲大多数在线购票的方式。谢谢。我决定从node express服务器生成一个pdf文件，并在外部浏览器中打开该文件的URL。如果这对您有所帮助，请单击左侧的灰色复选标记图标，将答案标记为“已接受”，并/或向上投票。已向上投票。我的声誉不到15，这就是为什么它没有显示在答案上。但是，只有通过单击灰色复选标记接受，才能向其他人显示此问题已得到充分回答，不需要其他答案。谢谢