Экспорт таблицы в многостраничный файл PDF с использованием kendo exportPDF

Question

Мне нужно экспортировать большую таблицу в pdf-файл, используя kendo pdfExport. Это код, который я до сих пор:

HTML:

<div style="position:relative;" id="temp-container"> 
    <div style="position:absolute;left:0px;top:50px;width:100%;background:url('http://127.0.0.1:8000/images/arrow1.png') no-repeat;height:50px;"></div> 
    <div style="position:absolute;left:26%;top:50px;font-size:28px;">Number</div> 
    <div style="position:absolute;left:50%;margin-left:-50px;width:100px;top:90px;font-size:28px;">Original</div> 

    <div style="position:absolute;right:0px;width:33%;top:50px;">Date1</div> 
    <div style="position:absolute;right:0px;width:33%;top:80px;">Date2</div> 
    <div style="position:absolute;right:0px;width:33%;top:110px;">Date3</div> 

    <div style="position:absolute;left:0px;right:0px;top:150px;background:url('http://127.0.0.1:8000/images/arrow3.png') no-repeat;height:50px;background-size:100% 100%;"></div> 

    <table cellpadding="6px" cellspacing="3px" border="0px" style="width:100%;position:relative;top:200px;"> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
     <tr> 
      <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;"> 
       <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div> 
      </td> 
      <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td> 
      <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td> 
     </tr> 
    </table> 
</div> 

и это PDF вызов функции экспорта:

setTimeout(function() { 
      kendo.drawing.drawDOM($("#temp-container")) 
       .then(function (group) { 
        // Render the result as a PDF file 
        return kendo.drawing.exportPDF(group, { 
         paperSize: "A4", 
         multiPage: true, 
         margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" } 
        }); 
       }) 
       .done(function (data) { 
        // Save the PDF file 
        kendo.saveAs({ 
         dataURI: data, 
         fileName: "HR-Dashboard.pdf", 
         proxyURL: "http://demos.telerik.com/kendo-ui/service/export" 
        }); 
       }); 
     }, 1000); 

Моя проблема заключается в том, что созданный файл имеет только одну страницу. Согласно документации http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#automatic-page-breaking-q1-2015 моя таблица не может быть позиционирована как фиксированная или абсолютная, а ее нет. Мне нужно применить аутообработку, потому что я не знаю, сколько элементов будет в таблице. В приведенном выше примере их много, но в некоторых других случаях только один или два элемента. Что я делаю не так?

И еще одна проблема, которая сводит меня с ума, заключается в том, что я не могу настроить документы. Я попытался установить A4, A5 в атрибутах exportPDF и установить ширину и высоту основного контейнера в дюймах. Но все же сгенерированный документ неправильно настроен. Я думаю, что paperSize A4 должен автоматически регулировать основной контейнер до формата А4?

Answer 1

Опции 1: Вы должны добавить аргумент multiPage: true для вызова exportPDF. Кроме того, убедитесь, что в HTML-элементы включены элементы с разбиением на страницы класса, в тех местах, где вы хотите создать новую страницу. Например. открыть html span class = "page-break" close span.

Варианты 2: Проверьте этот вариант для печати сетки http://demos.telerik.com/kendo-ui/grid/pdf-export.

Answer 2

Я не знаю, устранит ли это проблему, однако я заметил, что у вас есть несколько DIV в вашей таблице, у которых позиция стиля установлена ​​в абсолютную. Может быть, это то, что делает его сварливым?

Answer 3

Я была такая же проблема

я понял, что демос на сайте kendos неверны

Вот как это должно выглядеть

 kendo.drawing.drawDOM($("#temp-container"),{ 

          paperSize: "A4", 
          multiPage: true, 
          margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" } 
}) 
        .then(function (group) { 
         // Render the result as a PDF file 
         return kendo.drawing.exportPDF(group); 
        }) 
        .done(function (data) { 
         // Save the PDF file 
         kendo.saveAs({ 
          dataURI: data, 
          fileName: "HR-Dashboard.pdf" 
         }); 
        }); 

надеюсь, что это помогает