Problema: El tamaño del texto del pdf generado usando html2canvas y jspdf es diferente en diferentes tamaños de pantalla. En Mac, todo es normal y parece muy cómodo, pero cuando coloco la página en la pantalla extendida (27 pulgadas) y luego genero Otro
pdf, aunque la tipografía es la misma, pero el texto se vuelve muy pequeño. Cuando arrastré la página nuevamente a la Mac, encontré que el pdf generado era normal, en ese momento supuse que no debería ser un problema de tamaño del texto. .
Prueba: imprime el lienzo
const pdfContent = document.querySelector('.pdf-content')
html2canvas(pdfContent).then((canvas) => {
console.log(canvas)
})
El resultado de la impresión es que la altura y el ancho del lienzo son diferentes en diferentes pantallas. En este momento, configuro las propiedades de html2canvas
html2canvas(pdfContent, {
width: 1407,
height: 936
}).then((canvas) => {
console.log(canvas)
})
Hablemos de cómo provienen los datos, y luego la vista previa de impresión encontró que
la imagen no está completa o no es
correcta. Cuando realmente afecta el ancho y alto de la imagen capturada, el atributo Window.innerWidth
se puede obtener a través deownerDocument .defaultView.innerHeight. Cuando imprimimos propietarioDocument La propiedad .defaultView, encontramos que hay dos propiedades, InnerHeight y InnerWidth. El ancho de estas dos propiedades es 1407 y la altura es 936 cuando la vista previa de impresión es normal en Mac. Luego Escribe estas dos propiedades hasta la muerte. Las imágenes representadas en todas las pantallas son consistentes.
código completo
const generatePDF = () => {
if (haveData.value == true) {
const pdfContent = document.querySelector('.pdf-content')
console.log(pdfContent.ownerDocument.defaultView)
pdfContent.ownerDocument.defaultView.innerHeight = 936
pdfContent.ownerDocument.defaultView.innerWidth = 1407
pdfContent.ownerDocument.defaultView.devicePixelRatio = 2
html2canvas(pdfContent).then((canvas) => {
console.log(canvas)
const imgData = canvas.toDataURL('image/png', 1.0)
const pdf = new jsPDF('p', 'mm', 'a4')
const a4w = 190; const a4h = 277
pdf.addImage(imgData, 'PNG', 10, 10, a4w, Math.min(a4h, a4w * canvas.height / canvas.width))
pdf.setFontSize(20)
pdf.save(`${
valueMonth.value}月报.pdf`)
})
} else {
message.warning('本月暂无数据可导出')
}
}
De esta manera, puede obtener el pdf del mismo tamaño y el mismo tamaño de texto en cualquier pantalla.