属性'autoTableEndPosY‘在'jsPDF’类型上不存在
属性'autoTableEndPosY‘在'jsPDF’类型上不存在
提问于 2022-02-15 11:00:05
我正试图得到我正在生成的pdf的最后一个高度值。但我看到它扔错了:-
Property 'autoTableEndPosY' does not exist on type 'jsPDF'
我甚至在lastAutoTable中找不到jspdf中的const doc = new jsPDF()
我遗漏了什么吗？
package.json
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.23",ts文件
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable'
downloadPdf() {
const doc = new jsPDF();
var img = new Image();
img.src = "assets/images/logo.png";
doc.addImage(img, 15, 10, img.naturalWidth, img.naturalHeight)
doc.text("Title : - ",15, img.naturalHeight + 37)
autoTable(doc, {startY: doc.autoTableEndPosY + 5, html: '#tableId' })
doc.save('user-name.pdf')
}
回答 1
Stack Overflow用户
发布于 2022-02-15 12:32:26
说Property 'autoTableEndPosY' does not exist on type 'jsPDF'时出错的原因是导入错误--您应该从jspdf-autotable导入所有东西，而不仅仅是从autoTable导入--如下所示：
import {jsPDF} from 'jspdf';
import 'jspdf-autotable';而且，很明显，您需要理解有两种不同的方法可以使用jspdf-autotable生成一个PDF文件。在最新版本的jspdf-autotable中，可以从前端(通过普通JS)和后端(通过NodeJS)生成PDF：
A)前端
在兄弟会端使用jspdf-autotable很容易。您不需要安装任何包，只需将这些脚本放入您的<html>
<script src="https://simonbengtsson.github.io/jsPDF-AutoTable/examples/libs/jspdf.umd.js"></script>
<script src="https://simonbengtsson.github.io/jsPDF-AutoTable/dist/jspdf.plugin.autotable.js"></script>在您的index.html中，您需要有一个要打印为PDF格式的<table id="your-table-id">。然后，在<script>中，您只需将html: '#your-table-id'放在我的这里的演示中
doc.autoTable({
html: '#your-table-id'
});从兄弟会端向您的表中插入图像也很容易- 这里的演示。
B)后端
从后端用jspdf-autotable生成PDF要复杂一些，因为您不在浏览器环境中，因此html: '#your-table-id'无法工作。
首先正确导入包：
import {jsPDF} from 'jspdf';
import 'jspdf-autotable';然后，为了在PDF中创建一个表，您必须为doc.autoTable()提供一个表标题(<th>)和表数据(<td>)的值数组。此外，将图像插入到表中是一个非常麻烦的问题，因为您必须为每个图像指定坐标，并且所有图像都被视为绝对定位的元素-- 这里的演示 --在终端中通过node index.js运行脚本。
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
const downloadPdf = () => {
const doc = new jsPDF('p', 'pt', 'a4');
const thead = [['ID', 'Name', 'Photo']];
const tbody = [
[1, 'Johnny', ''],
[2, 'Jenny', ''],
];
const imagesData = [
{
x: 365,
y: 65,
src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gKgSUNDX1BST0ZJTEUAAQEAAAKQbGNtcwQwAABtbnRyUkdCIFhZWiAH3QAIAA4AFgAoAB1hY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADhjcHJ0AAABQAAAAE53dHB0AAABkAAAABRjaGFkAAABpAAAACxyWFlaAAAB0AAAABRiWFlaAAAB5AAAABRnWFlaAAAB+AAAABRyVFJDAAACDAAAACBnVFJDAAACLAAAACBiVFJDAAACTAAAACBjaHJtAAACbAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABwAAAAcAHMAUgBHAEIAIABiAHUAaQBsAHQALQBpAG4AAG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAMgAAABwATgBvACAAYwBvAHAAeQByAGkAZwBoAHQALAAgAHUAcwBlACAAZgByAGUAZQBsAHkAAAAAWFlaIAAAAAAAAPbWAAEAAAAA0y1zZjMyAAAAAAABDEoAAAXj///zKgAAB5sAAP2H///7ov///aMAAAPYAADAlFhZWiAAAAAAAABvlAAAOO4AAAOQWFlaIAAAAAAAACSdAAAPgwAAtr5YWVogAAAAAAAAYqUAALeQAAAY3nBhcmEAAAAAAAMAAAACZmYAAPKnAAANWQAAE9AAAApbcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltwYXJhAAAAAAADAAAAAmZmAADypwAADVkAABPQAAAKW2Nocm0AAAAAAAMAAAAAo9cAAFR7AABMzQAAmZoAACZmAAAPXP/bAEMABQMEBAQDBQQEBAUFBQYHDAgHBwcHDwsLCQwRDxISEQ8RERMWHBcTFBoVEREYIRgaHR0fHx8TFyIkIh4kHB4fHv/bAEMBBQUFBwYHDggIDh4UERQeHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHv/AABEIABgAGAMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAABwYI/8QAJxAAAQMEAQMDBQAAAAAAAAAAAQIDBAAFBhEhEiIxBxNBFjJRYXH/xAAZAQACAwEAAAAAAAAAAAAAAAAAAwEEBQb/xAAjEQABAwMDBQEAAAAAAAAAAAABAAIDBAUREjHBITJBUWHR/9oADAMBAAIRAxEAPwDbTM5x+0YE5lYlx7hEZ6W1JhyEOkvK8NbBICufn4BNS+7et31DZJlonW6Lbo01Pt+83KJcbTvfIOgeBo615qNYplFvhTDCessNmySnEiWw2pXU5pCkpWVkk7T1E8Ac7/NVbJIuGW7DlS4NsTCQ5BLSAqO2tEpSk9ijvvQrz3A62N6oqbjI7DCN1bp7fGdUgcOiy8eEJLYmwVbbcOkFKu0jyRz92tUpiubWGBbXrbd8MiSYpTpo2+c7HU0oAd/QSpClk8lSgfNKNZyoGMbKRpRw4jWlAbT+q6Q9EfTy85RhMJN7aadQ06JVvZkOnpcaI0UqPI6SeQn+71ulKWWhz2tPn8KZTjuPocrO5xYo87KH3I9si2dMhKBHaRFUlKhyknpA7TxsnQApSlZVRVyQENaustVvpauMulYMj6Rzhf/Z',
},
{
x: 365,
y: 85,
src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gKgSUNDX1BST0ZJTEUAAQEAAAKQbGNtcwQwAABtbnRyUkdCIFhZWiAH3QAIAA4AFgAoAB1hY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADhjcHJ0AAABQAAAAE53dHB0AAABkAAAABRjaGFkAAABpAAAACxyWFlaAAAB0AAAABRiWFlaAAAB5AAAABRnWFlaAAAB+AAAABRyVFJDAAACDAAAACBnVFJDAAACLAAAACBiVFJDAAACTAAAACBjaHJtAAACbAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABwAAAAcAHMAUgBHAEIAIABiAHUAaQBsAHQALQBpAG4AAG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAMgAAABwATgBvACAAYwBvAHAAeQByAGkAZwBoAHQALAAgAHUAcwBlACAAZgByAGUAZQBsAHkAAAAAWFlaIAAAAAAAAPbWAAEAAAAA0y1zZjMyAAAAAAABDEoAAAXj///zKgAAB5sAAP2H///7ov///aMAAAPYAADAlFhZWiAAAAAAAABvlAAAOO4AAAOQWFlaIAAAAAAAACSdAAAPgwAAtr5YWVogAAAAAAAAYqUAALeQAAAY3nBhcmEAAAAAAAMAAAACZmYAAPKnAAANWQAAE9AAAApbcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltwYXJhAAAAAAADAAAAAmZmAADypwAADVkAABPQAAAKW2Nocm0AAAAAAAMAAAAAo9cAAFR7AABMzQAAmZoAACZmAAAPXP/bAEMABQMEBAQDBQQEBAUFBQYHDAgHBwcHDwsLCQwRDxISEQ8RERMWHBcTFBoVEREYIRgaHR0fHx8TFyIkIh4kHB4fHv/bAEMBBQUFBwYHDggIDh4UERQeHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHv/AABEIABgAGAMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAABwYI/8QAJxAAAQMEAQMDBQAAAAAAAAAAAQIDBAAFBhEhEiIxBxNBFjJRYXH/xAAZAQACAwEAAAAAAAAAAAAAAAAAAwEEBQb/xAAjEQABAwMDBQEAAAAAAAAAAAABAAIDBAUREjHBITJBUWHR/9oADAMBAAIRAxEAPwDbTM5x+0YE5lYlx7hEZ6W1JhyEOkvK8NbBICufn4BNS+7et31DZJlonW6Lbo01Pt+83KJcbTvfIOgeBo615qNYplFvhTDCessNmySnEiWw2pXU5pCkpWVkk7T1E8Ac7/NVbJIuGW7DlS4NsTCQ5BLSAqO2tEpSk9ijvvQrz3A62N6oqbjI7DCN1bp7fGdUgcOiy8eEJLYmwVbbcOkFKu0jyRz92tUpiubWGBbXrbd8MiSYpTpo2+c7HU0oAd/QSpClk8lSgfNKNZyoGMbKRpRw4jWlAbT+q6Q9EfTy85RhMJN7aadQ06JVvZkOnpcaI0UqPI6SeQn+71ulKWWhz2tPn8KZTjuPocrO5xYo87KH3I9si2dMhKBHaRFUlKhyknpA7TxsnQApSlZVRVyQENaustVvpauMulYMj6Rzhf/Z',
},
];
doc.autoTable({
head: thead,
body: tbody,
startY: doc.autoTableEndPosY + 5,
});
// Add images
for (let i = 0; i < imagesData.length; i++) {
const image = imagesData[i];
const dimensionX = 15;
const dimensionY = 15;
doc.addImage(image.src, 'JPEG', image.x, image.y, dimensionX, dimensionY);
}
const timestamp = new Date().getTime();
doc.save('table_' + timestamp + '.pdf');
};
downloadPdf();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71125271
复制相关文章
相似问题
腾讯云开发者
