个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试将“HTML 中的表格”与“页眉”结合起来...查看示例。我可以让每个人单独工作，但不能一起工作。
当我将两者结合起来时，我遇到了问题......你能看出我在这里做错了什么吗？为什么这不起作用？？
可能在我的标题 VAR 中...此外，它有一种方法可以从导出中排除一列???
使用这个 https://github.com/simonbengtsson/jsPDF-AutoTable
<html>
<body>
<button onclick="generate()">Download PDF</button>
<script src="jspdf/jspdf.min.js"></script>
<script src="jspdf/jspdf.plugin.autotable.src.js"></script>
<script>
function generate() {
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));
doc.autoTable(res.columns, res.data, options);
var header = function (data) {
doc.setFontSize(18);
doc.setTextColor(40);
doc.setFontStyle('normal');
doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
doc.text("Testing Report", data.settings.margin.left + 55, 50);
};
var options = {
beforePageContent: header,
margin: {top: 80}
};
doc.autoTable(columns, data, options);
doc.save("table.pdf");
}
var headerImgData = 'data:image/jpeg;base64,/9... my dataimage';
</script>
<br/><br/>
<table id="basic-table">
<thead>
<tr>
<th title="Field #1">ID</th>
<th title="Field #2">First name</th>
<th title="Field #3">Last name</th>
<th title="Field #4">Email</th>
<th title="Field #5">Country</th>
<th title="Field #6">IP-address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">1</td>
<td>Donna</td>
<td>Moore</td>
<td>dmoore0@furl.net</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td align="right">2</td>
<td>Janice</td>
<td>Henry</td>
<td>jhenry1@theatlantic.com</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td align="right">3</td>
<td>Ruth</td>
<td>Wells</td>
<td>rwells2@constantcontact.com</td>
<td>Trinidad and Tobago</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td align="right">4</td>
<td>Jason</td>
<td>Ray</td>
<td>jray3@psu.edu</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td align="right">5</td>
<td>Jane</td>
<td>Stephens</td>
<td>jstephens4@go.com</td>
<td>United States</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5@com.com</td>
<td>Canada</td>
<td>18.186.38.37</td>
</tr>
</tbody>
</table>
</body>
</html>
最佳答案
我不完全确定你想要完成什么，但我做了一个最好的猜测。这是一个codepen结果。我将您的生成函数更改为:
function generate() {
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));
doc.autoTable(res.columns, res.data, {margin: {top: 80}});
var header = function(data) {
doc.setFontSize(18);
doc.setTextColor(40);
doc.setFontStyle('normal');
//doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
doc.text("Testing Report", data.settings.margin.left, 50);
};
var options = {
beforePageContent: header,
startY: doc.autoTableEndPosY() + 20
};
doc.autoTable(res.columns, res.data, options);
doc.save("table.pdf");
}
关于javascript - JSPDF 和 AutoTable 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33743540/
24
4
0
我正在使用带有插件 jspdf-autotable 的 jspdf 来为一个非常宽的表格创建一个 pdf，有没有办法让表格/列数据自动适应任何页面大小？ 我尝试了下面的代码溢出:'linebreak'
我的表有 13 列。如何为每列获得不同的宽度？我可以像这样给每个列宽吗？ 样式:{溢出:'换行符'，列宽:[100,80,80,70,80,80,70,70,70,70,60,80,100]}， 我的
如何使用jspdf和jspadf-autotable在PDF中实现嵌套表格？类似于下图的内容: 最佳答案 jspdf-autotable 中不支持嵌套表格，但您可以使用 didDrawCell Hoo
在 jsPDF 中使用 .cell 时如何删除填充？ 我到处都看了，文档很模糊 this.pdf = new jsPDF(); this.pdf.cell(0, 0, 10, 10, "cell ce
表格插件 JsPDF-AutoTable: https://github.com/simonbengtsson/jsPDF-AutoTable 如何使页面横向与纵向相反？在文档中，它只是说“仅支持 p
是否可以添加 HyperLink在 jsPDF ? 这是我用于相同的代码。 var doc = new jsPDF('p', 'pt'); doc.fromHTML( 'Cl
我对 jsPDF autotable 有疑问。 我的代码: $('#printBtn').on('click', function() { var pdf = new jsPDF('p
我有自动表的问题。我的表由 thead、tbody 和 tfoot 组成。我的脚是我在每一列上的总值(value)。我能够生成 pdf，但 tfoot 或总页脚不断打印在每一页上。我在检查文档时使用
有人可以帮忙举一个为 jspdf-autotable 设置自定义字体的例子吗？ 我尝试了以下 var doc = new jsPDF('p', 'pt'); doc.setFont("rotobo")
我有一个带图像的 html 表。当我尝试转换为 PDF 时，只有数据来了。图像未以 PDF 格式显示。 如何获取pdf格式的表格td图片？ 契约(Contract)标题包含复选框图像。但不是以 pdf
我正在做的是使用 jsPDF 创建我生成的图形的 PDF。但是，我不确定如何包装标题(使用 text() 函数添加)。标题的长度因图形而异。目前，我的标题正在页面外运行。任何帮助，将不胜感激! 这是我
我正在使用img jsPDF AutoTable库从我的HTML表创建PDF文件，Everythink工作正常，PDF总是创建，但我对我的国家/地区典型的一些特殊字符有疑问。在我的 PDF 文件中，包
JsPdf-autoTable是一款非常棒的软件，并且非常简单就能让基础功能发挥作用。 现在我想在每个页面的顶部添加一个 Logo 和一些文本，并在每个页面上添加一个 page X of Y 页脚，但
我有一个用于保存 html 页面的按钮。当用户单击按钮时，我想触发 jsPDF 函数，但它返回“jspdf PubSub 错误”并且生成的 pdf 文件为空白。 var doc = new jsPD
我是使用 jsPDF 的新手，能够很好地生成普通 PDF，但是当我尝试应用外部 CSS 或普通样式背景颜色时，它没有任何效果。 我的 JSP 包括: 我正在使用下
我正在尝试将“页码 x of y”添加到使用 jspdf 和 jspdf-autotable 生成的 PDF 中。我使用了 jspdf-autotable 示例网站上的 Examples.js 文件中
我正在使用jspdf和jspdf-autotable将基于数据的表格导出为PDF。 有时，我的数据可能包含 DOM 元素，这些元素不由 jspdf-autotable 插件处理。在大多数情况下，DOM
我刚刚开始使用 jsPDF 和 AutoTable 插件，它几乎完美地满足了我们的使用需求。一个问题... 是否可以将列定义中的 dataKey 分配给映射到表的 JSON 中的嵌套属性？ 我们有一个
我刚刚开始使用 jsPDF 和 AutoTable 插件，它几乎完美地满足了我们的使用需求。一个问题... 是否可以将列定义中的 dataKey 分配给映射到表的 JSON 中的嵌套属性？ 我们有一个
我使用 Array.prototype.push() 创建了一个包含来自动态表的值的数组.然后像这样把它转换成pdf doc.autoTable(vHeader, vData, opt); doc.s
我是一名优秀的程序员,十分优秀！