Именованная страница и flex box не работают в PDFReactor - PullRequest
Новая
       12

Именованная страница и flex box не работают в PDFReactor

0 голосов
/ 27 июня 2018

Я пытаюсь использовать именованную страницу для создания двух макетов страниц с помощью обертки Node.js. Я использую PDFReactor version-10-beta. Это работает, как и ожидалось, только когда я не использую flexbox.

Если я использую стили флексбокса в .cover-layer, то размер страницы на большей странице становится Fan-Fold European, Portrait, хотя я установил его ширину (610 мм) и высоту (260 мм). Но с нынешним стилем это работает как положено. Может кто-то указать, почему использование 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>

1 Ответ

0 голосов
/ 28 июня 2018

Это известная проблема, которая будет исправлена ​​в следующей версии PDFreactor.

...