javascript - 如何使用 jsPDF 将图像放在页面的中心?
问题描述
使用 html2canvas & jsPDF,我试图DIV
在我的屏幕上打印一个完整的内容,我已经做到了这一点:
const printAsPdf = () => {
html2canvas(pageElement.current, {
useCORS: true,
allowTaint: true,
scrollY: -window.scrollY,
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'px', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const widthRatio = pageWidth / canvas.width;
const heightRatio = pageHeight / canvas.height;
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio;
doc.addImage(image, 'JPEG', 0, 0, canvasWidth, canvasHeight);
doc.output('dataurlnewwindow');
});
};
这会用我选择的图像/画布填充页面。但我无法对齐页面上的图像死点。
解决方案
这个问题需要一些老式的 CSS 技巧。我回想起我们过去是如何将图像居中的position: absolute;
,我们将在其中计算图像宽度和画布宽度,将其取反并将其除以一半。在这里使用相同的技术就像一个魅力!
const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
因此,完整的函数如下所示:
const printAsPdf = () => {
html2canvas(pageElement.current, {
useCORS: true,
allowTaint: true,
scrollY: -window.scrollY,
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'px', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const widthRatio = pageWidth / canvas.width;
const heightRatio = pageHeight / canvas.height;
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio;
const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight);
doc.output('dataurlnewwindow');
});
};
推荐阅读
- javascript - 求矩形面积和周长的独立函数第二部分
- typescript - Typescript 中对象文字的更严格返回类型
- c# - Discord.NET '对象引用未设置为对象的实例。C#
- swift - Swift - PKPushRegistry / VOIP 令牌不改变
- sql - 递归加入最近的祖先/父母以在同一个表中记录?
- google-sheets - Google Sheet:如何使用 arrayformula 将数据从一张表复制到另一张表?
- speech-to-text - 比较段落
- javascript - 我正在制作一个打印99瓶歌曲歌词的功能。当我使用console.log时,它可以工作,但是当我使用return时它不起作用
- typescript - 打字稿推断类型参数
- python - gremlin-python - 退出程序时如何避免“未关闭的客户端会话”?