使用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');
});
};