Как напечатать таблицы в формате PDF с помощью Javascript?

Как лучше всего печатать таблицы в PDF с помощью JavaScript?

Например, у меня есть следующий код, и если вы нажмете "Показать PDF", таблица появится в формате PDF в новом окне. Возможно ли реализовать это с помощью библиотеки jsPDF?

<body>
    <table>
        <tr>
            <th>example</th>
            <th>example2</th>
        </tr>
        <tr>
            <td>value1</td>
            <td>value2</td>
        </tr>
    </table>
    <br>
    <input type="button" value="Show PDF">
</body>
Источник

6 ответов

Решение

Вы должны использовать DOMPDF,:
dompdf - это конвертер HTML в PDF. По сути, dompdf - это (в основном) CSS 2.1-совместимый HTML-макет и механизм рендеринга, написанный на PHP. Это средство визуализации, основанное на стилях: оно будет загружать и читать внешние таблицы стилей, встроенные теги стилей и атрибуты стиля отдельных элементов HTML. Он также поддерживает большинство презентационных атрибутов HTML.

Скачать domPDF

http://code.google.com/p/dompdf/

<?
require  "dompdf_config.inc.php";
$html = <<<STY
<table>
<tr>
<th>example</th>
<th>example2</th>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
</table>
</body>
STY;
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();    
$dompdf->stream("mypdf.pdf", array("Attachment" => 0));
?>
Источник

В Bytescout появился новый продукт javascript "PDF Generator SDK for Javascript", который способен генерировать PDF-файлы на 100% на стороне клиента, возможно, вы можете создавать PDF-файлы с текстом, изображениями и графикой. Полное форматирование HTML не поддерживается, но вы можете использовать html-теги внутри текста, чтобы использовать расширенное форматирование (новая версия будет включать поддержку и html-теги внутри текста)

Демонстрация счета-фактуры с логотипом и созданной таблицей: http://bytescout.com/products/developer/pdfgeneratorsdkjs/create_pdf_invoice_javascript.html

Источник

У меня была такая же проблема, так я ее решил.

//inputs starts here

var T_X =20 //Starting X of Table
var T_Y =25 //Starting Y of Table
var T_W =170 //Width of Table
var T_H =10 //Height of each cell
var Px  =7 // Scale of width in each columns
var Fs  =17 //Font size
var Tp  =7 //Y of all cells text, must change with `Fs`

var c = new Array() //Input Each Row by Adding new c[i]
c[0] = new Array("1","2","3","4","5","6","7");
c[1] = new Array("a","b","c","d","e","f","g");
c[2] = new Array("A","B","C","D","E","F","G");
//c[3] = new Array("Alpha","Beta","Gamma","Delta","Epsilon","Zeta","Eta");

//inputs ends here
//From This Part to bottom, there is no more inputs, no need to read them.

//i found this function here "http://stackru.com/questions/118241/calculate-text-width-with-javascript"
String.prototype.width = function() {
  var f = Px+'px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}


var doc = new jsPDF();
doc.text(85, 15, "Table example");

doc.setDrawColor(50,215,50);
doc.setLineWidth(0.5);

var i
var rows = c[0].length
var cols = c.length
var max = new Array()

for(i=0;i<cols;i++)
    max[i]=0

doc.setFontSize(Fs);

for(i=0;i<rows;i+=1)
{
    doc.line(T_X, T_Y+T_H*i,T_W + T_X, T_Y+T_H*i);

    for(var j=0;j<cols;j+=1)
        if(c[j][i].width()>max[j])
            max[j]=c[j][i].width(); 

}
    doc.line(T_X, T_Y+T_H*rows,T_W + T_X, T_Y+T_H*i);

var m = 0
for(i=0;i<cols;i+=1)
{
    for(var j=0;j<rows;j+=1)
        doc.text(T_X + 0.5 + m, Tp+T_Y+T_H*j,c[i][j]);
    doc.line(T_X + m, T_Y ,T_X + m, T_Y + rows * T_H);

    m += max[i];   
}
doc.line(T_X + T_W, T_Y ,T_X + T_W, T_Y + rows * T_H);

Надеюсь, это поможет, однако уже поздно!

Источник

Попробуй ведьму TCPDF
TCPDF - это PHP-класс для генерации PDF-файлов на лету без внешних расширений. Эта библиотека также включает в себя класс для извлечения данных из существующих документов PDF и классов для создания 1D и 2D штрих-кодов в различных форматах.

Источник

Плагин AutoTable для jsPDF автоматизирует множество задач, необходимых для создания таблиц или списков. Единственное, что требуется для вашего примера - это сначала преобразовать таблицу в json, а затем передать ее autoTable() метод. Проверьте демонстрации или репо для более продвинутых примеров.

function generatePdf() {
    var doc = new jsPDF('p', 'pt');
    var json = doc.autoTableHtmlToJson(document.getElementById("table"));
    doc.autoTable(false, json);
    doc.save('table.pdf');
}


function generatePdf() {
   var doc = new jsPDF('p', 'pt');
   var json = doc.autoTableHtmlToJson(document.getElementById("table"));
   doc.autoTable(false, json);
   doc.save('table.pdf');
}
<table id="table">
  <tr>
    <th>example</th>
    <th>example2</th>
  </tr>
  <tr>
    <td>value1</td>
    <td>value2</td>
  </tr>
</table>
<br>
<input type="button" onclick="generatePdf()" value="Show PDF">

<script src="https://rawgit.com/MrRio/jsPDF/master/dist/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/jspdf.plugin.autotable.js"></script>

Источник

Вот пример без каких-либо плагинов или библиотек для распечатки HTML-таблицы с использованием JavaScript.

      <html>
<head>
    <style>
      * { font-family: calibri; font-size: 20px; }
      table
      {
        width: 100%;
      }
      table, th, td 
      {
        border: solid 1px #DDD;
        text-align: center;
      }
    </style>
</head>
<body id="myTable">
    <table>
        <tr>
            <th>example1</th>
            <th>example2</th>
        </tr>
        <tr>
            <td>value1</td>
            <td>value2</td>
        </tr>
      <tr>
            <td>value3</td>
            <td>value4</td>
        </tr>
    </table>
    <br>
   
  <p>
    <input type="button" value="Show PDF" 
           id="btPrint" onclick="createPDF()" />
  </p>
  
  

</body>
<script>
    function createPDF() {
        var sTable = document.getElementById('myTable').innerHTML;
         // add all the css and styling for the table 
        var style = "<style>";
        style = style + "table {width: 100%;font: 17px Calibri;}";
        style = style + "table, th, td {border: solid 1px #000; border-collapse: collapse;";
        style = style + "padding: 2px 3px;text-align: center;}";
        style = style + "</style>";

        // here we creat our window object
        var win = window.open('', '', 'height=700,width=700');

        win.document.write('<html><head>');
        win.document.write('<title>my table</title>');   // title or name for pdf
        win.document.write(style);          // add our css.
        win.document.write('</head>');
        win.document.write('<body>');
        win.document.write(sTable);         // table content. 
        win.document.write('</body></html>');

        win.document.close();   // close the window.

        win.print();    // print the table.
    }
</script>
</html>
Источник
Другие вопросы по тегам