1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'
export const htmlToPDF = async (htmlId: string, title: string = "报表", bgColor = "#fff") => { let pdfDom: HTMLElement | null = document.getElementById(htmlId) as HTMLElement pdfDom.style.padding = '0 10px !important' const A4Width = 595.28; const A4Height = 841.89; let canvas = await html2canvas(pdfDom, { scale: 2, useCORS: true, backgroundColor: bgColor, }); let pageHeight = (canvas.width / A4Width) * A4Height; let leftHeight = canvas.height; let position = 0; let imgWidth = A4Width; let imgHeight = (A4Width / canvas.width) * canvas.height;
const ctx: any = canvas.getContext('2d'); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.rotate((20 * Math.PI) / 180); ctx.font = '20px Microsoft Yahei'; ctx.fillStyle = 'rgba(184, 184, 184, 0.8)'; for (let i = canvas.width * -1; i < canvas.width; i += 240) { for (let j = canvas.height * -1; j < canvas.height; j += 200) { ctx.fillText('水印名', i, j); } }
let pageData = canvas.toDataURL("image/jpeg", 1.0); let PDF = new jsPDF("p", 'pt', 'a4'); if (leftHeight < pageHeight) { PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= A4Height; if (leftHeight > 0) PDF.addPage(); } } PDF.save(title + ".pdf"); }
|