【问题标题】:How to print tables on pdf with Javascript?如何使用 Javascript 在 pdf 上打印表格?
【发布时间】:2013-01-25 08:01:50
【问题描述】:

使用 JavaScript 以 PDF 格式打印表格的最佳方法是什么?

例如,我有下一个代码,如果您点击“显示 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>

【问题讨论】:

    标签: javascript pdf html-table jspdf


    【解决方案1】:

    Bytescout 有新的 javascript 产品“PDF Generator SDK for Javascript”,它能够在客户端 100% 生成 PDF 文件,可能您可以生成带有文本、图像、图形的 PDF。不支持完整的 HTML 格式,但您可以在文本中使用 , , html 标记来使用富格式(新版本将支持文本中的 和 html 标记)

    带有徽标和表格的发票演示:http://bytescout.com/products/developer/pdfgeneratorsdkjs/create_pdf_invoice_javascript.html

    【讨论】:

    • 这个应该被删除它不是开源也不是免费的
    【解决方案2】:

    我有同样的问题,这是我解决它的方法。

    //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://stackoverflow.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);
    

    希望对你有帮助,但是已经晚了!

    【讨论】:

      【解决方案3】:

      试试女巫 TCPDF
      TCPDF 是一个 PHP 类,用于即时生成 PDF 文件,无需外部扩展。该库还包括一个从现有 PDF 文档中提取数据的类和生成各种格式的一维和二维条码的类。

      【讨论】:

        【解决方案4】:

        用于 jsPDF 的 AutoTable 插件可以自动完成制作表格或列表所需的许多任务。您的示例唯一需要的是首先将表转换为 json,然后将其传递给 autoTable() 方法。查看demos 或repo 了解更多高级示例。

        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>

        【讨论】:

          【解决方案5】:

          你应该使用 DOMPDF,:
          dompdf 是一个 HTML 到 PDF 的转换器。从本质上讲,dompdf 是(大部分)用 PHP 编写的符合 CSS 2.1 的 HTML 布局和渲染引擎。它是一个样式驱动的渲染器:它将下载和读取外部样式表、内联样式标签以及单个 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));
          ?>
          

          【讨论】:

          • 问题是“如何使用Javascript在pdf上打印表格?”;这个答案是一个 PHP 方法。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2011-11-21
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-04-18
          相关资源
          最近更新 更多