jspdf-autotable: динамическая ширина и высота в обернутом тексте - PullRequest
Новая
       16

jspdf-autotable: динамическая ширина и высота в обернутом тексте

0 голосов
/ 22 октября 2018

Я пытаюсь сгенерировать PDF с использованием jspdf и автоматически с этим кодом: 

    <script src="https://unpkg.com/jspdf@1.3.3/dist/jspdf.min.js"></script>
    <script src="https://unpkg.com/jspdf-autotable@2.3.1/dist/jspdf.plugin.autotable.js"></script>

$(document).ready(function() {

        var columns = [
            {title: "Dirigido a", dataKey: "Dirigidoa"},
        ];

        var rows = [
            {Dirigidoa:"DIPLOMADOS UNIVERSITARIOS EN ENFERMERIA PREFERENTEMENTE DE LA GAI TALAVERA DE LA REINA"},
            {Dirigidoa:"Actualizar conocimientos en el manejo de las heridas y la utilización racional de los productos de cura en ambiente húmedo (CAH)"
            + "1.Conocer el comportamiento de la herida en sus distintas fases. 2.Valorar al paciente con heridas de evolución tórpida. 3.Manejar los instrumentos"
            + "de valoración y medición de la lesión.4.Conocer la evolución histórica del tratamiento de las heridas desde el mundo antiguo hasta la actualidad."
            + "5.Comprender la importancia de la preparación del lecho de la herida. 6.Solventar las causas subyacentes. 7.Conocer el múltiple arsenal de productos" 
            + "para el tratamiento de las heridas. 8.Elegir el producto adecuado en cada fase y estadio de la herida. 9.Valorar la importancia de la prevención de las UPP."
            + "10. Conocer y abordar los distintos tipos de ostomías. 11. Diferenciar y tratar las lesiones de los miembros inferiores según el componente vascular."
            + "12. Conocer el comportamiento del pie diabético y los distintos abordajes terapéuticos"},
            {Dirigidoa:"asdlkasjdlkajsd asdasdasd"}
        ];                      

        var doc = jsPDF("p", "pt","a4");
        doc.autoTable(columns, rows, {  
            startY: false, 
            theme: 'grid',  
            //tableWidth: 'auto', 
            columnWidth: 'wrap', 
            showHeader: 'everyPage',
            columnStyles: {
                0: {columnWidth: 100}
            },
            headerStyles: {theme: 'grid'},
            styles: {overflow: 'linebreak', columnWidth: 'wrap', font: 'arial', fontSize: 10, cellPadding: 4, overflowColumns: 'linebreak'},
        });
        doc.save('table.pdf');               

});

В результате я получаю следующее:

jspdftable.png

Проблемы, с которыми можно столкнуться в сгенерированном PDF-файле, следующие:

  1. таблица переполнена правым полем
  2. Когдатекст слишком длинныйКогда это происходит, добавляются эллипсы

Идея состоит в том, чтобы загружать строки динамически, чтобы длина текста полей могла варьироваться, поэтому я не могу дать ячейке фиксированную ширину.

Как я могу решить эти проблемы?

1 Ответ

0 голосов
/ 05 февраля 2019

изменить эту строку

стили: {переполнение: 'linebreak', columnWidth: 'wrap', шрифт: 'arial', fontSize: 10, cellPadding: 4, overflowColumns: 'linebreak'},

до

стили: {переполнение: 'linebreak', columnWidth: '100', шрифт: 'arial', fontSize: 10, cellPadding: 4, overflowColumns: 'linebreak'}, 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.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.0/jspdf.plugin.autotable.js"></script>
<script>
$(document).ready(function()
{
          var columns = [
            {title: "Dirigido a", dataKey: "Dirigidoa"},
        ];

        var rows = [
            {Dirigidoa:"DIPLOMADOS UNIVERSITARIOS EN ENFERMERIA PREFERENTEMENTE DE LA GAI TALAVERA DE LA REINA"},
            {Dirigidoa:"Actualizar conocimientos en el manejo de las heridas y la utilización racional de los productos de cura en ambiente húmedo (CAH)"
            + "1.Conocer el comportamiento de la herida en sus distintas fases. 2.Valorar al paciente con heridas de evolución tórpida. 3.Manejar los instrumentos"
            + "de valoración y medición de la lesión.4.Conocer la evolución histórica del tratamiento de las heridas desde el mundo antiguo hasta la actualidad."
            + "5.Comprender la importancia de la preparación del lecho de la herida. 6.Solventar las causas subyacentes. 7.Conocer el múltiple arsenal de productos" 
            + "para el tratamiento de las heridas. 8.Elegir el producto adecuado en cada fase y estadio de la herida. 9.Valorar la importancia de la prevención de las UPP."
            + "10. Conocer y abordar los distintos tipos de ostomías. 11. Diferenciar y tratar las lesiones de los miembros inferiores según el componente vascular."
            + "12. Conocer el comportamiento del pie diabético y los distintos abordajes terapéuticos"},
            {Dirigidoa:"asdlkasjdlkajsd asdasdasd"}
        ];                      

        var doc = jsPDF("p", "pt","a4");
        doc.autoTable(columns, rows, {  
            startY: false, 
            theme: 'grid',  
            //tableWidth: 'auto', 
            columnWidth: 'wrap', 
            showHeader: 'everyPage',
            columnStyles: {
                0: {columnWidth: '100'}
            },
            headerStyles: {theme: 'grid'},
            styles: {overflow: 'linebreak', columnWidth: '100', font: 'arial', fontSize: 10, cellPadding: 4, overflowColumns: 'linebreak'},
        });
        doc.save('table.pdf'); 
        });
        </script>
...