jsPDF / AutoTable Сгенерированный PDF перекрывает ширину страницы - PullRequest
Новая
       13

jsPDF / AutoTable Сгенерированный PDF перекрывает ширину страницы

0 голосов
/ 04 мая 2018

Я пытаюсь сгенерировать PDF из большой и длинной таблицы HTML с несколькими столбцами, оборачивая текст всех столбцов до ширины страницы. Я знаю, что делаю что-то не так, потому что окончательный PDF-файл перекрывает ширину страницы и не разбивает текст столбцов на новые строки.

Может ли кто-нибудь мне помочь?

Это мой код: 

$("#btnPDF").click(function(){
	var doc = new jsPDF('l');

  var elem = $("#basicTable")[0];
  var res = doc.autoTableHtmlToJson(elem);
  doc.autoTable(res.columns, res.data, {
    startY: 21,
    margin: {horizontal: 14},
    bodyStyles: {valign: 'top'},
    styles: {overflow: 'linebreak', columnWidth: 'wrap'},
    columnStyles: {}
  });

  doc.save('table.pdf');
});
<table id="basicTable">
  <thead>
    <tr>
      <th>iD</th>
      <th>Client</th>
      <th>Name</th>
      <th>Address</th>
      <th>ZIPCode</th>
      <th>City</th>
      <th>State</th>
      <th>Country</th>
      <th>Contact1</th>
      <th>Phone1</th>
      <th>eMail1</th>
      <th>Contact2</th>
      <th>Phone2</th>
      <th>eMail2</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Antonio</td>
      <td>ANTONIO EN LA DIRECCION2</td>
      <td>DIRECCION2</td>
      <td>CP</td>
      <td>CIUDAD</td>
      <td>PROVINCIA</td>
      <td>PAIS</td>
      <td>Antonio el del nombre más largo del mundo</td>
      <td>+34666666666666</td>
      <td>antonio@elcorreomaslargo.com</td>
      <td>Antonio José el del nombre más largo del mundo</td>
      <td>+34666666666666</td>
      <td>antonio@elcorreomaslargo.com</td>
    </tr>
  </tbody>
</table>
<button type="button" id="btnPDF">
  Generate PDF
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js"></script>

JSFiddle

Большое спасибо за вашу помощь!

1 Ответ

0 голосов
/ 13 сентября 2018

У меня есть обходной путь для вашей проблемы. Это не красиво, но я этим пользуюсь.

Вы можете создать несколько новых таблиц, содержащих содержимое одной длинной таблицы. Было бы так: 

<table id="basicTablePart1">
  <thead>
    <tr>
      <th>iD</th>
      <th>Client</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Antonio</td>
      <td>ANTONIO EN LA DIRECCION2</td>
    </tr>
  </tbody>
</table>

<table id="basicTablePart2">
  <thead>
    <tr>
      <th>Address</th>
      <th>ZIPCode</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DIRECCION2</td>
      <td>CP</td>
      <td>CIUDAD</td>
    </tr>
  </tbody>
</table>

Дайте мне знать, если кто-нибудь нашел более разумное решение!

...