Description
Hello author:
There is a problem that has been bothering me all along. domToPng() in modern screenshot() converts a DOM into base64 to generate a long screenshot of the DOM, similar to html2canvas. However, the html2canvas has not been updated for a long time, so modern screenshot() is used
My problem is that when the long screenshot generated by mode screen is paginated, the content is truncated. Previously, I encountered that the height of the displayed div container was fixed, so my solution was to insert an empty div node container at the truncated location and set the height to squeeze the truncated content. Now, I have encountered the problem of the div container height not being fixed, so this content is truncated. I have not had a solution yet. Does the author have any solution?
My code:
function handleClick() {
deviceReportsLazy.value = true
const exprtCanvas = exportMe.value
domToPng(exprtCanvas, {}).then(canvas => {
const img = new Image()
img.src = canvas
let contentWidth, contentHeight
img.onload = function () {
contentWidth = img.width
contentHeight = img.height
const pageHeight = (contentWidth / 595.28) * 1000
let leftHeight = contentHeight
let position = 0
const imgWidth = 555.28
const imgHeight = (555.28 / contentWidth) * contentHeight
const pdf = new jsPDF('', 'pt', 'a4', true)
if (leftHeight < pageHeight) {
pdf.addImage(canvas, 'JPEG', 20, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
pdf.addImage(canvas, 'JPEG', 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save(${t('health.reportName')}.pdf)
ElNotification({
title: t('common.form.tip'),
message: t('common.text.success'),
type: 'success',
duration: 2000
})
deviceReportsLazy.value = false
}
})
}