我正在尝试使用命名页面通过 Node.js 包装器创建两个页面布局。我正在使用 PDFReactor version-10-beta。只有当我不使用 flexbox 时，它才会按预期工作。
如果我在 .cover-layer 中使用 flexbox 样式，biggerPage 页面的大小
变为 Fan-Fold European, Portrait 即使我设置了它的宽度 (610mm) 和高度 (260mm)。但是对于当前的样式，它可以按预期工作。有人可以指出为什么使用 flex box 和 css 命名页面会导致不希望的页面布局吗？这是代码:
(() => {
const PDFreactor = require("./nodejs-wrapper/PDFreactor.js");
const pdfReactorInstance = new PDFreactor();
const fs = require('fs');
const config = {
document: `file://${__dirname}/html-file-name.html`,
appendLog: true
};
const result = pdfReactorInstance.convertAsBinary(config);
result.then(function(result) {
fs.writeFile('result.pdf', result, 'binary');
}, function(error) {
console.log(error);
});
})();@page {
margin: -3mm;
-ro-marks: trim;
-ro-marks-width: 1pt;
-ro-marks-color: black;
-ro-bleed-width: 3mm;
}
@page smallPage {
size: 203.2mm 254mm;
}
@page biggerPage {
size: 610mm 260mm;
-ro-marks-color: green;
}
.page {
height: 260mm;
width: 209.2mm;
page: smallPage;
background: red;
}
.page-fraction {
background: #0abf0a;
height: 260mm;
float: left;
display: inline-block;
}
.page-fraction--1 {
width: 40%
}
.page-fraction--2 {
width: 60%
}
.cover {
height: 266mm;
width: 616mm;
page: biggerPage;
}
.cover-layer {
/*display: flex;
flex-flow: row nowrap; */
position: relative;
background: red;
height: 260mm;
width: 610mm;
top: 3mm;
left: 3mm;
}
.cover__back,
.cover__front {
/*flex-basis: 50%;*/
/* comment height, display and float, if flex-basis is not commented*/
width: 50%;
height: 100%;
display: inline-block;
float: left;
}
.cover__back {
background: black;
color: white;
}
.cover__front {
background: skyblue;
}<body>
<div class="cover">
<div class="cover-layer">
<div class="cover__back">Cover back</div>
<div class="cover__front">Cover front</div>
</div>
</div>
<div class="page">
<div class="page-fraction page-fraction--1">page part 1</div>
<div class="page-fraction page-fraction--2">page part 2</div>
</div>
</body>最佳答案
这是一个已知问题，将在下一版本的 PDFreactor 中修复。
关于css - 命名页面和 flexbox 在 PDFReactor 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51064556/