css - 命名页面和弹性框在 PDFReactor 中不起作用
问题描述
我正在尝试使用命名页面来使用 Node.js 包装器创建两个页面布局。我正在使用 PDFReactor version-10-beta。只有当我不使用 flexbox 时,它才能按预期工作。
如果我在 largePage 页面中使用 flexbox 样式,即使我设置了它的宽度(610 毫米)和高度(260 毫米),.cover-layer
页面的大小也会变成这样。Fan-Fold European, Portrait
但是使用当前的样式,它可以按预期工作。有人能指出为什么使用 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 的下一版本中修复。
推荐阅读
- extjs - 如何允许文本框在 extjs 中只取数字
- android - 将版本升级到 0.60.4 后 React Native TypeError
- c - 为什么'&&'可以用来判断最大界限?
- tensorflow - 如何修复 MNIST 手写数据集的 lstm 和 cnn 代码
- python - 如何修复:pywintypes.com_error:(-2147352573,'未找到成员。',无,无)
- regex - 使用正则表达式对密码进行特殊字符验证
- c# - 如何在 C# 中将所有数组值提取到 datagridview?
- codeigniter-3 - 输入字段数组的 myfunction
- r - 如何设置 install_keras() 的 virtualenv?
- javascript - JSON 解析错误:意外的标识符“be”