Kent Wood
Reputation: 1522
page width beyound 1250,headless-chromium will push content to out of left side
it looks the default browser width is 1250, when my page content is greater than 1250, let's say 1682px. then the content be pushed out to the left side(1250-1682 = -432px) what the result is like this
this is test.js. you can run like node test.js
const puppeteer = require("puppeteer");
async function generatePDF(html) {
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: [
"--disable-dev-shm-usage",
"--no-sandbox",
"--disable-setuid-sandbox"
// "--start-maximized" ///not working...
]
});
const page = await browser.newPage();
await page.emulateMedia("print");
await page.setContent(html, { waitUntil: "load" });
return [page, browser];
}
generatePDF(require("fs").readFileSync("./test.html", { encoding: "utf8" }));
and this is the test.html page. i have set the body to position:absolute;top:0;left:0; in purpose. it is run fine in normal chrome browser ,but in headless-chromium, it just looks wired.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<style>
html {
-webkit-print-color-adjust: exact;
}
body {
margin: 0;
}
</style>
<style>
html {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
}
body {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
}
#root {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
}
.page {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
}
</style>
<style data-styled="true" data-styled-version="5.0.1">
.eLkIXm {
touch-action: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
overflow: hidden;
}
data-styled.g1[id="sc-AxjAm"] {
content: "eLkIXm,";
}
.eBZmKI {
position: relative;
width: 1682px;
height: 1122px;
-webkit-transition: width 0s ease-in-out, height 0s ease-in-out;
transition: width 0s ease-in-out, height 0s ease-in-out;
}
.eBZmKI > .bloodLine {
opacity: 1;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 0.3cm;
border: 2px dashed rgba(255, 0, 0, 0.6);
pointer-events: none;
-webkit-transition: all 0s ease-in-out, opacity 0.1s ease-in-out;
transition: all 0s ease-in-out, opacity 0.1s ease-in-out;
}
data-styled.g6[id="sc-AxgMl"] {
content: "eBZmKI,";
}
.wYfhh {
width: 1682px;
height: 1122px;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transition: -webkit-transform 0s ease-in-out;
-webkit-transition: transform 0s ease-in-out;
transition: transform 0s ease-in-out;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
position: relative;
}
.wYfhh .innerPages {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
}
.wYfhh .innerPages .innerpage {
overflow: hidden;
position: relative;
height: 100%;
-webkit-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}
.wYfhh .innerPages .innerpage.spine {
width: auto;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.wYfhh .innerPages .innerpage.normal {
width: 793px;
}
data-styled.g7[id="sc-AxheI"] {
content: "wYfhh,";
}
.bojfHH {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
data-styled.g8[id="sc-Axmtr"] {
content: "bojfHH,";
}
@page {
padding: 0;
margin: 0;
size: 21.59999999969397cm 29.599999999577385cm;
}
@media print {
.yGsvL .page {
background: yellow !important;
page-break-after: always;
page-break-inside: avoid;
width: 21.59999999969397cm;
height: 29.599999999577385cm;
}
}
data-styled.g12[id="sc-fzpans"] {
content: "yGsvL,";
}
</style>
</head>
<body>
<div id="root">
<div class="App2">
<div class="sc-fzpans yGsvL">
<div class="inner">
<div class="pages">
<div
class="page sc-Axmtr bojfHH"
data-page-wrapper="6cce5440-643f-11ea-8571-bd85b5033407"
>
<div>
<div
data-page="6cce5440-643f-11ea-8571-bd85b5033407"
class="sc-AxgMl eBZmKI"
>
<div class="sc-AxheI wYfhh">
<style></style>
<div class="innerPages">
<div style="background:red" class="innerpage normal ">
<div
style="position:absolute;width:400px;height:36px;transform-origin:center center;transform:translate(-50%, -50%)
translate(292.8794197642793px, 154.53671804170443px) rotate(0deg);opacity:1;z-index:3"
data-id="df4dc0e0-6779-11ea-8389-df0a5368605e"
class="sc-AxjAm eLkIXm"
>
<div
style="transition:transform 0.3s ease;transform:scale(1, 1) translate(-50%, -50%) scale(2 ,2) translate(50%, 50%);width:100%;height:100%"
>
<div
style="width:200px;height:18px;transform:translate(0px,0px)"
>
<div
class="ql-container ql-disabled"
style="width:200px"
>
<div class="ql-editor">
<p>
<strong style="color: rgb(255, 145, 77);"
><em>Hello Kent</em></strong
>
</p>
</div>
</div>
</div>
</div>
</div>
<div
style="position:absolute;width:200px;height:200px;transform-origin:center center;transform:translate(-50%, -50%)
translate(591.6930073406838px, 972.4326909016465px) rotate(0deg);opacity:1;z-index:4"
data-id="df4e3610-6779-11ea-8389-df0a5368605e"
class="sc-AxjAm eLkIXm"
>
<div
style="transition:transform 0.3s ease;transform:scale(1, 1) translate(-50%, -50%) scale(1 ,1) translate(50%, 50%);width:100%;height:100%"
>
<div
style="width:200px;height:200px;transform:translate(0px,0px)"
>
<div
style="width:100%;height:100%;display:flex;justify-content:center;align-items:center"
>
<svg width="100%" height="100%">
<g>
<g
transform="translate(100,90)"
class="slices"
>
<path
class="innerSlice"
d="M -36.2 2.963645253936595e-15 A 36.2 24.200000000000003 0 0 1 -36.2 2.963645253936595e-15 L -36.2 20.000000000000004 A 36.2 24.200000000000003 0 0 0 -36.2 20.000000000000004 z"
style="fill: rgb(40, 79, 159);"
></path>
<path
class="innerSlice"
d="M -36.2 2.963645253936595e-15 A 36.2 24.200000000000003 0 0 1 -36.2 2.963645253936595e-15 L -36.2 20.000000000000004 A 36.2 24.200000000000003 0 0 0 -36.2 20.000000000000004 z"
style="fill: rgb(171, 44, 14);"
></path>
<path
class="innerSlice"
d="M -36.2 2.963645253936595e-15 A 36.2 24.200000000000003 0 0 1 -29.2864151963731 -14.22440310547785 L -29.2864151963731 5.775596894522151 A 36.2 24.200000000000003 0 0 0 -36.2 20.000000000000004 z"
style="fill: rgb(199, 119, 0);"
></path>
<path
class="innerSlice"
d="M -29.2864151963731 -14.22440310547785 A 36.2 24.200000000000003 0 0 1 11.18641519637309 -23.01556769434272 L 11.18641519637309 -3.015567694342721 A 36.2 24.200000000000003 0 0 0 -29.2864151963731 5.775596894522151 z"
style="fill: rgb(12, 117, 19);"
></path>
<path
class="innerSlice"
d="M 11.18641519637309 -23.01556769434272 A 36.2 24.200000000000003 0 0 1 36.2 -5.92729050787319e-15 L 36.2 19.999999999999993 A 36.2 24.200000000000003 0 0 0 11.18641519637309 -3.015567694342721 z"
style="fill: rgb(119, 0, 119);"
></path>
<path
class="topSlice"
d="M 90 0 A 90 60 0 0 1 27.81152949374527 57.06339097770921 L 11.124611797498108 22.825356391083687 A 36 24 0 0 0 36 0 z"
style="fill: rgb(51, 102, 204); stroke: rgb(51, 102, 204);"
></path>
<path
class="topSlice"
d="M 27.81152949374527 57.06339097770921 A 90 60 0 0 1 -72.81152949374525 35.267115137548394 L -29.124611797498105 14.106846055019359 A 36 24 0 0 0 11.124611797498108 22.825356391083687 z"
style="fill: rgb(220, 57, 18); stroke: rgb(220, 57, 18);"
></path>
<path
class="topSlice"
d="M -72.81152949374525 35.267115137548394 A 90 60 0 0 1 -72.81152949374527 -35.26711513754838 L -29.12461179749811 -14.106846055019354 A 36 24 0 0 0 -29.124611797498105 14.106846055019359 z"
style="fill: rgb(255, 153, 0); stroke: rgb(255, 153, 0);"
></path>
<path
class="topSlice"
d="M -72.81152949374527 -35.26711513754838 A 90 60 0 0 1 27.81152949374525 -57.06339097770922 L 11.124611797498101 -22.825356391083687 A 36 24 0 0 0 -29.12461179749811 -14.106846055019354 z"
style="fill: rgb(16, 150, 24); stroke: rgb(16, 150, 24);"
></path>
<path
class="topSlice"
d="M 27.81152949374525 -57.06339097770922 A 90 60 0 0 1 90 -1.469576158976824e-14 L 36 -5.8783046359072966e-15 A 36 24 0 0 0 11.124611797498101 -22.825356391083687 z"
style="fill: rgb(153, 0, 153); stroke: rgb(153, 0, 153);"
></path>
<path
class="outerSlice"
d="M 89.5 20 A 89.5 59.5 0 0 1 27.657020996557797 76.58786271956163 L 27.657020996557797 56.587862719561635 A 89.5 59.5 0 0 0 89.5 0 z"
style="fill: rgb(40, 79, 159);"
></path>
<path
class="outerSlice"
d="M 27.657020996557797 76.58786271956163 A 89.5 59.5 0 0 1 -72.40702099655779 54.973222511402156 L -72.40702099655779 34.973222511402156 A 89.5 59.5 0 0 0 27.657020996557797 56.587862719561635 z"
style="fill: rgb(171, 44, 14);"
></path>
<path
class="outerSlice"
d="M -72.40702099655779 54.973222511402156 A 89.5 59.5 0 0 1 -89.5 20.000000000000007 L -89.5 7.286648454926752e-15 A 89.5 59.5 0 0 0 -72.40702099655779 34.973222511402156 z"
style="fill: rgb(199, 119, 0);"
></path>
<path
class="outerSlice"
d="M -89.5 20.000000000000007 A 89.5 59.5 0 0 1 -89.5 20.000000000000007 L -89.5 7.286648454926752e-15 A 89.5 59.5 0 0 0 -89.5 7.286648454926752e-15 z"
style="fill: rgb(12, 117, 19);"
></path>
<path
class="outerSlice"
d="M -89.5 20.000000000000007 A 89.5 59.5 0 0 1 -89.5 20.000000000000007 L -89.5 7.286648454926752e-15 A 89.5 59.5 0 0 0 -89.5 7.286648454926752e-15 z"
style="fill: rgb(119, 0, 119);"
></path>
<text
class="percent"
x="43.686917696247164"
y="21.160269082529034"
>
20%
</text>
<text
class="percent"
x="-16.686917696247157"
y="34.23803458662553"
>
20%
</text>
<text
class="percent"
x="-54"
y="4.408728476930472e-15"
>
20%
</text>
<text
class="percent"
x="-16.686917696247168"
y="-34.238034586625524"
>
20%
</text>
<text
class="percent"
x="43.68691769624716"
y="-21.16026908252904"
>
20%
</text>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
<div
style="position:absolute;width:200px;height:200px;transform-origin:99.99999999999989px 100.00000000000006px;transform:translate(-99.99999999999989px, -100.00000000000006px)
translate(660.4914814143247px, 232.23934968268364px) rotate(-15.522360738375369deg);opacity:1;z-index:2"
data-id="df4e8430-6779-11ea-8389-df0a5368605e"
class="sc-AxjAm eLkIXm"
>
<div
style="transition:transform 0.3s ease;transform:scale(-1, 1) translate(-50%, -50%) scale(1 ,1) translate(50%, 50%);width:100%;height:100%"
>
<div
style="width:200px;height:200px;transform:translate(0px,0px)"
>
<img
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2905486894,2646015843&fm=26&gp=0.jpg"
style="object-fit:fill;width:100%;height:100%"
draggable="false"
/>
</div>
</div>
</div>
<div
style="position:absolute;width:200px;height:200px;transform-origin:center center;transform:translate(-50%, -50%)
translate(210.71576053578224px, 968.900242739742px) rotate(0deg);opacity:1;z-index:11"
data-id="df4eab40-6779-11ea-8389-df0a5368605e"
class="sc-AxjAm eLkIXm"
>
<div
style="transition:transform 0.3s ease;transform:scale(1, 1) translate(-50%, -50%) scale(1 ,1) translate(50%, 50%);width:100%;height:100%"
>
<div
style="width:400px;height:400px;transform:translate(-100px,-100px)"
>
<img
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2905486894,2646015843&fm=26&gp=0.jpg"
style="object-fit:fill;width:100%;height:100%"
draggable="false"
/>
</div>
</div>
</div>
<div
style="position:absolute;width:450px;height:300px;transform-origin:225.0000000000001px 150px;transform:translate(-225.0000000000001px, -150px)
translate(332.63271441523125px, 567.6116192203082px) rotate(0.1700476276704208deg);opacity:1;z-index:0"
data-id="df4ed250-6779-11ea-8389-df0a5368605e"
class="sc-AxjAm eLkIXm"
>
<div
style="transition:transform 0.3s ease;transform:scale(-1, 1) translate(-50%, -50%) scale(1 ,1) translate(50%, 50%);width:100%;height:100%"
>
<div
style="width:450px;height:300px;transform:translate(0px,0px)"
>
<img
src="https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1580734170&t=9f62c4e350e667c8a67aa2c0d97f56e8"
style="object-fit:fill;width:100%;height:100%"
draggable="false"
/>
</div>
</div>
</div>
</div>
<div
style="background:red"
class="innerpage spine "
></div>
<div
style="background:red"
class="innerpage normal "
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
final updated
after i lunch putteteer with devtools: true,i finaly got why that happen
there is a css define that effect the page layout. i removed it,and it looks fine now.
@media print {
.yGsvL .page {
background: yellow !important;
page-break-after: always;
page-break-inside: avoid;
width: 21.59999999969397cm;
height: 29.599999999577385cm;
}
}
Upvotes: 0
Views: 502
Answers (1)
DLima
Reputation: 179
One of the args in the puppeteer configuration is the size of the window, even if it is headless...
This will do the trick to define the size
args: [`--window-size=1920,1080`]
Or even:
launchPuppeteerOptions: {
args: [`--window-size=1920,1080`],
defaultViewport: null
}
Upvotes: 1
Related Questions
- Puppeteer opens an empty tab in non-headless mode
- Why Chromium doesn't open in headless mode?
- Puppeteer not working in headless mode with chromium
- Puppeteer page doesn't want to load totally in headless mode
- Puppeteer Headless Blocked by google with headless: false
- Unused window space in puppeteer (non-headless)
- how tu run puppeteer chromium/chrome `headless:false` on centos 6/7 server
- Chrome headless loades page differently than normal Chrome
- Rotated viewport in puppeteer
- google chrome headless puppeteer get DOM of page