jsPDF - от HTML не пишет на правильной странице - PullRequest
Новая
       27

jsPDF - от HTML не пишет на правильной странице

1 голос
/ 09 марта 2020

Я делаю небольшой проект с jsPDF. Мне нужно написать цветной текст, изменив размер шрифта и используя жирный текст. Поэтому от Html мой выбор, потому что я могу легко сделать это с css и html.

Проблема в том, что только около половины страницы можно использовать для записи с Html. Если он попытается написать за его пределами, будет создана новая страница, и текст там будет записан.

Вот небольшой пример html с кодом javascript, который можно запустить самостоятельно. 

<!DOCTYPE html>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

<script type="text/javascript">
  function fromHtmlTest() {
    var doc = new jsPDF({
      orientation: 'l',
      unit: 'px',
      format: [30, 30]
    });

    // doc.setFontSize(1); // the workaround for this problem

    var toWrite = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th"];

    for (var i = 0; i < toWrite.length; i++) {
      doc.fromHTML(
        '<div style="font-size:1">' + toWrite[i] + '</div>'
        , 1 // x
        , i // y
        , {
          'width': 10,
          'elementHandlers': {}
        }
      )
    }
    doc.save('Test.pdf');
  }
</script>

<body>
  <input type="button" value="Start" onclick="fromHtmlTest()" />
</body>

Вот изображение PDF после запуска кода:

из Html пример - результат кода

fromHtml example - code result

«8-й» должен быть непосредственно под «7-й», а не на следующей странице. Если в массив будет добавлено «9-е», будет добавлена ​​и другая страница.

Как я могу использовать всю страницу с Html?

Редактировать: В качестве обходного пути "сделать c .setFontSize (1);» делает трюк. Я добавил его в пример кода в качестве комментария.

...