Esta es mi primera pregunta aquí, espero que me puedan ayudar. Estoy tratando de crear un archivo PDF con 160 códigos qr y algo de texto, escribí una función para separar cada qr y sus textos, pero creo que me falta algo al dibujarlos todos en el lienzo/pdf final. Porque todos ellos están posicionados en el margen superior e izquierdo. Y tampoco respeta el margen del texto.
Este es el código que estoy ejecutando:
const QrQuantity = 160 const pageSize = { width: 1680.12, height: 1134.77 } const fontSize = 7 const qrSize = 45 const marginCanvasX = 55.96 const marginCanvasY = 28.89 const marginQrX = 55.16 const marginQrY = 66.25 const rows = 10 const columns = 16 const textMargin = 4 function drawQR(ctx, img, id, column, row) { ctx.save() const offsetX = (column * qrSize) + ((marginQrX + fontSize) * column) const offsetY = (row * qrSize) + ((marginQrY + fontSize) * row) // Set the position to where we need to draw the QR ctx.translate(offsetX, offsetY) // Draw the QR code ctx.drawImage(img, 0, 0, qrSize, qrSize) // Write "My web" ctx.fillText('myweb.com', 8, qrSize + fontSize + textMargin) ctx.save() // Rotate to write vertical text ctx.rotate(Math.PI / 2) // Write the ID ctx.fillText(id, 0, -qrSize - 3) // Undo all the translations and rotations ctx.restore() ctx.restore() } function downloadPDF(qrs) { // Create the context const ctx = new canvas2pdf.PdfContext(blobStream(), { size: [pageSize.width, pageSize.height] }) // Set the base styles ctx.fillStyle = '#000' ctx.font = `${fontSize}px` // Apply left and top margins ctx.translate(marginCanvasX, marginCanvasY) // When we're done drawing, download the image as a PDF document ctx.stream.on('finish', () => { const blob = ctx.stream.toBlob('application/pdf') download(blob, 'codes.pdf') })Este es el resultado final.
¡Gracias a todos!
