javascript - 如何使用 Javascript 在 pdf 上打印表格?

标签 javascript pdf html-table jspdf

使用 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>

最佳答案

我遇到了同样的问题,我就是这样解决的。

//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);

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

关于javascript - 如何使用 Javascript 在 pdf 上打印表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14791471/

相关文章:

javascript - 使用 Node js 在 Redis 中存储以 id 作为键的对象

excel - 使用 Excel vba 打开 PDF 文件并执行文本搜索

html - 哪个选项将自动增加/减少 div 中表格的高度

html - CSS 中带有边框的表格行之间的空格

javascript - Jquery .load - 从index.php到index.html相同域获取<div>特色产品(opencart)

javascript - 如何隐藏鼠标悬停在按钮或链接上时跟随光标的箭头

cocoa-touch - iPad 上 PDF 的替代方案

forms - 使用 pdftk 填充 pdf 表单后保持可编辑状态

html - 在没有宽度的表格单元格内添加省略号

javascript - OLOO如何访问私有(private)变量