похоже, что ширина браузера по умолчанию равна 1250, когда содержимое моей страницы больше 1250, скажем, 1682px. затем содержимое будет вытолкнуто в левую сторону (1250-1682 = -432px), как будет выглядеть результат
. Это тест. js. Вы можете работать как 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" }));
, и это тестовая страница. html. Я установил тело на position:absolute;top:0;left:0; в целях. он нормально работает в обычном chrome браузере, но в безголовом хроме просто выглядит проводным.
<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>
окончательное обновление
после того, как я пообедал путтеером с devtools: true, я наконец понял, почему это произошло, css определило, как это влияет на макет страницы. Я удалил его, и теперь он выглядит хорошо.
@media print {
.yGsvL .page {
background: yellow !important;
page-break-after: always;
page-break-inside: avoid;
width: 21.59999999969397cm;
height: 29.599999999577385cm;
}
}