I have an app to generate pdf files from csv files. The problem is when I want to show the PDF, sometimes it looks like in the image below, the data is correct but the headers are overlapped, and this only happens when I show the PDF file with electron and iframe. If I open the file manually, without electron, it looks good, all the headers are fine.
NOTE: The problem occurs when I run my app on a HMI with windows embedded, if I run the app on my computer it works fine.
This is my code to show the PDF file in a new BrowserWindow.
let pdfViewerWindow = new BrowserWindow({
autoHideMenuBar : true,
resizable : false,
minimizable : true,
maximizable : false,
closable : false,
movable: false,
skipTaskbar : true,
webPreferences: {
nodeIntegration: true,
plugins: true
}
})
ipcMain.on('openPDFViewer', (event) => {
try {
pdfViewerWindow.loadURL(`file://${__dirname}/static/html/pdfPreview.html`);
pdfViewerWindow.show()
} catch (error) {
console.log(error);
}
});
And I use an iframe to show the PDF on my BrowserWindow ..
<div class="m-0 p-0">
<iframe src="../PDF/pdfViewer.pdf#zoom=65" frameborder="0"></iframe>
</div>