NodeJS + Puppetear CSS Uyumsuzluğu
app.get('/', async function (request,response) {
var date1 = new Date();
var raporno = request.query.raporno;
var foldername = request.query.folder;
var dir = 'raporlar/' + foldername;
if (!fs.existsSync(dir)){
fs.mkdirSync(dir);
}
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost/pdf/index.php?raporno='+raporno, {waitUntil : 'networkidle0'});
await page.emulateMediaType('screen');
await page.pdf({
path: 'raporlar/' + foldername + '/' + raporno+'.pdf',
printBackground: true,
width: '200mm',
height: '285mm',
scale:1,
margin: {
top: 0,
left: 0,
right: 0,
bottom: 0
},
preferCSSPageSize: true
});
await browser.close();
var date2 = new Date();
var diff = date2 - date1;
diff=diff/1000;
response.send(raporno + '.pdf '+diff+' sn de oluşturuldu');
})
const server = app.listen(8080);
*{
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
border: none;
}
@page {
margin: 0
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.sheet {
margin: 0;
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
width: 200mm;
height: 285mm;
break-inside: avoid;
}
@media screen {
body {
background: #fff;
margin:0;
}
.sheet {
overflow:hidden;
break-after: always;
page-break-after: always;
page-break-before: always;
}
}
css kodları da bu şekilde. sheet divi her bir sayfanın genel taşıyıcısı, html görünümünde hiçbir sıkıntı yok, fakat pdf e dönüştüğünde veya tarayıcı üzerinde print yaptığımda page-break-after çalışmıyor nedense. sheet divini daha küçük boylu da yapıp denedim ama halen sayfayı kesmiyor bittiği yerde. her sayfada 1mm den az olarak aşağı kaymalar var ve ne yaptıysam bu taşmayı çözemedim.
Ekran Görüntüsü : https://prnt.sc/15q38oa
kaynak yüksekliğini 1mm küçültüp, body ve sheet e display:block verince oldu...