html2covnas jsPdf 导出pdf

  import html2canvas from 'html2canvas'
  import JsPDF from 'jspdf'
  .... exportPdf() { this.$nextTick(() => { const element = document.getElementById('pdf-dom') // 要打印的区域 html2canvas(element, { logging: false, useCORS: true }).then(function(canvas) { console.log(canvas) let pdf = new JsPDF('p', 'mm', 'a4') // A4纸,纵向 console.log(pdf) let ctx = canvas.getContext('2d') let a4w = 190 let a4h = 267 // a4大小,216mmx297m 各保留10mm的边距,上下15m,显示区190x257 let imgHeight = Math.floor((a4h * canvas.width) / a4w) let renderedHeight = 0 let logo = document.getElementById('pdf-logo') while (renderedHeight < canvas.height) { let page = document.createElement('canvas') page.width = canvas.width page.height = Math.min(imgHeight, canvas.height - renderedHeight) page .getContext('2d') .putImageData( ctx.getImageData( 0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight) ), 0, 0 ) pdf.addImage( page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 15, a4w, Math.min(a4h, (a4w * page.height) / page.width) ) pdf.addImage(logo, 'PNG', 10, 3) // 页眉 renderedHeight += imgHeight if (renderedHeight < canvas.height) pdf.addPage() } pdf.save('test.pdf') }) }) },

....

  

上一篇:canvas_10 像素动态文字


下一篇:RectMask2D裁剪Canvas无效问题