- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
JsPdf-autoTable是一款非常棒的软件,并且非常简单就能让基础功能发挥作用。
现在我想在每个页面的顶部添加一个 Logo 和一些文本,并在每个页面上添加一个 page X of Y
页脚,但我不知道如何操作。我想从 URL(我网站上的本地文件)获取 Logo 图像。
某处有一个简单的例子吗?我认为我是用 JsPdf 来做的,而不是 JsPdf-autoTable。
最佳答案
该方法接受一个参数:
doc.autoTable(options);
options
,是一个对象,可以在文档 here 中查看其属性.
此选项
对象接受 hooks 。您正在寻找 didDrawPage
Hook ,它将允许插入页眉和页脚。
didDrawPage: (HookData) => {} - Called after the plugin has finished drawing everything on a page. Can be used to add headers and footers with page numbers or any other content that you want on each page there is an autotable.
注意:didDrawPage
Hook 在低于 v3 的版本中名为 addPageContent
。
demo 中已经有一个关于如何执行此操作的示例。 。代码如下:
var doc = new jsPDF();
var totalPagesExp = "{total_pages_count_string}";
doc.autoTable({
head: headRows(),
body: bodyRows(40),
didDrawPage: function (data) {
// Header
doc.setFontSize(20);
doc.setTextColor(40);
doc.setFontStyle('normal');
if (base64Img) {
doc.addImage(base64Img, 'JPEG', data.settings.margin.left, 15, 10, 10);
}
doc.text("Report", data.settings.margin.left + 15, 22);
// Footer
var str = "Page " + doc.internal.getNumberOfPages()
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
str = str + " of " + totalPagesExp;
}
doc.setFontSize(10);
// jsPDF 1.4+ uses getWidth, <1.4 uses .width
var pageSize = doc.internal.pageSize;
var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
doc.text(str, data.settings.margin.left, pageHeight - 10);
},
margin: {top: 30}
});
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
}
return doc;
<小时/>
base64Img
变量必须包含您的图像,我只使用 Base64 图像进行了测试,据说您可以添加一个超链接,如果您本地有图像,它将起作用。
代码片段:
(function() {
function imgToBase64(url, callback) {
if (!window.FileReader) {
callback(null);
return;
}
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result.replace('text/xml', 'image/jpeg'));
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
var base64Img;
// Convert the image to base64
// imgToBase64("https://placehold.it/50x50", function(base64) {
// base64Img = base64;
// });
// Static base64 for example purposes
base64Img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAG1BMVEXMzMyWlpaqqqq3t7exsbGcnJy+vr6jo6PFxcUFpPI/AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAQUlEQVQ4jWNgGAWjgP6ASdncAEaiAhaGiACmFhCJLsMaIiDAEQEi0WXYEiMCOCJAJIY9KuYGTC0gknpuHwXDGwAA5fsIZw0iYWYAAAAASUVORK5CYII='
var headRows = function() {
return [{
id: "ID",
name: "Name",
}];
};
var bodyRows = function(rowCount) {
rowCount = rowCount || 10;
let body = [];
for (var i = 1; i <= rowCount; i++) {
body.push({
id: i,
name: "Name " + i
});
}
return body;
}
function generate() {
var doc = new jsPDF();
var totalPagesExp = "{total_pages_count_string}";
doc.autoTable({
head: headRows(),
body: bodyRows(40),
didDrawPage: function(data) {
// Header
doc.setFontSize(20);
doc.setTextColor(40);
doc.setFontStyle('normal');
if (base64Img) {
doc.addImage(base64Img, 'JPEG', data.settings.margin.left, 15, 10, 10);
}
doc.text("Example", data.settings.margin.left + 15, 22);
// Footer
var str = "Page " + doc.internal.getNumberOfPages()
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
str = str + " of " + totalPagesExp;
}
doc.setFontSize(10);
// jsPDF 1.4+ uses getWidth, <1.4 uses .width
var pageSize = doc.internal.pageSize;
var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
doc.text(str, data.settings.margin.left, pageHeight - 10);
},
margin: {
top: 30
}
});
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
}
doc.save("headerandfooterexample.pdf");
}
document.getElementById('download-btn').addEventListener('click', generate);
})()
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable"></script>
<button id="download-btn">Download PDF</button>
关于jspdf - 如何使用 JsPDF-autoTable 在每个页面的顶部添加 Logo ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42913631/
有人可以帮忙举一个为 jspdf-autotable 设置自定义字体的例子吗? 我尝试了以下 var doc = new jsPDF('p', 'pt'); doc.setFont("rotobo")
我在 Angular 应用程序上使用 JSPdf,我正在尝试使用 JS 自动表插件,但我遇到了 JS 错误 EXCEPTION: Uncaught (in promise): TypeError: d
我正在使用 jsPDF Autotable 从 HTML 表格生成 PDF。 TD 元素包含一个用变量填充单元格的 ID。一切正常,但我想将负值的 textColor 设置为红色。我找不到如何实现此目
我对 jsPDF autotable 有疑问。 我的代码: $('#printBtn').on('click', function() { var pdf = new jsPDF('p
我正在尝试创建一个如下所示的表格: 我已经实现了类似的目标,但我需要删除表格之外的边框。现在我使用 lineWidth: 0.2, lineColor: [73, 138, 159] 来创建边框,但这
我正在使用 jsPDF Autotable 生成包含多个表格的 pdf 文档。 函数生成(){ var doc = new jsPDF('l', 'pt', 'a3'); var res = do
下面是我从后端获得的示例响应。 let data = [ { "thisIsTheResponseFromBackEnd": [ { "Col Header 1": "
在网络应用程序中,我使用 JSPDF Autotable 来构建 PDF。问题是数据将是动态的(我将使用 AngularJS 1.x),因此行可以有不同的高度。 在某些情况下,Autotable 会打
我想用 JSPDF 导出 PDF,我使用插件作为“jspdf.autotable”来创建表格。现在的问题是我想要如下格式样式: 如您所见,表格外有一个边框,但标题部分没有,我已经实现了,但是当行超过页
我正在尝试使用 jsPdf Auto-table 将动态数据打印到 pdf 文件中。当我这样做时,我遇到了某种错误,例如 The headers should be an object or arra
我正在使用 angular2 和 Node JS。我已经安装了jspdf和 jspdf-autotable两个模块都使用 npm。在 angular-cli.json 文件中,我嵌入了脚本: "scr
我有自动表的问题。我的表由 thead、tbody 和 tfoot 组成。我的脚是我在每一列上的总值(value)。我能够生成 pdf,但 tfoot 或总页脚不断打印在每一页上。我在检查文档时使用
我有一个带有 rowspan/colspan 的 html 表格。我正在使用 jspdf 和 jspdf-autotable 将该 html 表格导出为 pdf。但是,保存的 pdf 有一个表,该表在
我尝试使用 jsPdf AutoTable 将动态数据打印到 PDF 中。但我未能做到这一点。我搜索了很多网站,但没有人提到将动态数据放入 Row 中。所以我的问题是,有没有什么方法可以将动态数据放入
我想使用 jspdf autotable 插件将这两个表打印为 pdf。但我编写的脚本仅打印第二个表。我认为问题出在剧本的编写上。有人会指导我如何使用 jspdf-autotable 打印这两个表格吗
我正在尝试使用 jspdf 和 jspdf-Autotable 构建一个小型应用程序,但我不知道如何使用另一个变量值创建自定义最后一行现有的表。 到目前为止我所做的是: doc.autoTable
我正在使用 jsPDF 从 HTML 表格生成 PDF 并且 jsPDF 很棒,预计我遇到一个问题,当我尝试包装 columnWidth 时,我的表格被切断了:( var doc = new jsPD
我正在尝试将“HTML 中的表格”与“页眉”结合起来...查看示例。我可以让每个人单独工作,但不能一起工作。 当我将两者结合起来时,我遇到了问题......你能看出我在这里做错了什么吗?为什么这不起作
有人使用 jsPDF autoTable 从 Table 中排除 pdf 结果中的列的经验..Would appriciate 一点帮助。 最佳答案 无论如何,在深入研究 API 和示例之后。我找到了
我正在尝试使用 JSPDF 和 AutoTable 从 html 表格生成 PDF 文件。 在我的示例中,有一个带有两个标题行的 html 表格,如下所示: ID
我是一名优秀的程序员,十分优秀!