import html2Canvas from 'html2canvas' import jsPDF from 'jspdf' const htmlToPdf = { getPdfBase64(title, id) { return new Promise((resolve) => { html2Canvas(document.querySelector(id), { allowTaint: false, taintTest: false, logging: false, useCORS: true, dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍 scale: 4 // 按比例增加分辨率 }).then((canvas) => { const pdf = new jsPDF('p', 'mm', 'a4') // A4纸,纵向 const ctx = canvas.getContext('2d'), a4w = 190, a4h = 272 // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277 let imgHeight = Math.floor((a4h * canvas.width) / a4w), // 按A4显示比例换算一页图像的像素高度 renderedHeight = 0 while (renderedHeight < canvas.height) { const page = document.createElement('canvas') page.width = canvas.width const pageHeight = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页 page.height = pageHeight // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中 page .getContext('2d') .putImageData(ctx.getImageData(0, renderedHeight, canvas.width, pageHeight), 0, 0) pdf.addImage( page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width) ) // 添加图像到页面,保留10mm边距 renderedHeight += pageHeight if (renderedHeight < canvas.height) { pdf.addPage() // 如果后面还有内容,添加一个空页 } } const pdfBase64String = pdf.output('datauristring') // 获取 base64 编码的 PDF 文件 resolve(pdfBase64String) // 解析 base64 字符串 }) }) }, getPdf(title, id) { html2Canvas(document.querySelector(id), { allowTaint: false, taintTest: false, logging: false, useCORS: true, dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍 scale: 4 // 按比例增加分辨率 }).then((canvas) => { const pdf = new jsPDF('p', 'mm', 'a4') // A4纸,纵向 const ctx = canvas.getContext('2d'), a4w = 190, a4h = 272 // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277 let imgHeight = Math.floor((a4h * canvas.width) / a4w), // 按A4显示比例换算一页图像的像素高度 renderedHeight = 0 while (renderedHeight < canvas.height) { const page = document.createElement('canvas') page.width = canvas.width const pageHeight = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页 page.height = pageHeight // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中 page .getContext('2d') .putImageData(ctx.getImageData(0, renderedHeight, canvas.width, pageHeight), 0, 0) pdf.addImage( page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width) ) // 添加图像到页面,保留10mm边距 renderedHeight += pageHeight if (renderedHeight < canvas.height) { pdf.addPage() // 如果后面还有内容,添加一个空页 } } pdf.save(title + '.pdf') // 保存 PDF 文件 }) }, getPdfh(title, id) { html2Canvas(document.querySelector(id), { allowTaint: false, taintTest: false, logging: false, useCORS: true, dpi: 300, // 将分辨率提高到特定的DPI 提高四倍 scale: 1 // 按比例增加分辨率 }).then((canvas) => { const pdf = new jsPDF('l', 'mm', 'a4') // A4纸,纵向 const ctx = canvas.getContext('2d'), a4w = 190, a4h = 272 // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277 let imgHeight = Math.floor((a4h * canvas.width) / a4w), // 按A4显示比例换算一页图像的像素高度 renderedHeight = 0 while (renderedHeight < canvas.height) { const page = document.createElement('canvas') page.width = canvas.width const pageHeight = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页 page.height = pageHeight // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中 page .getContext('2d') .putImageData(ctx.getImageData(0, renderedHeight, canvas.width, pageHeight), 0, 0) pdf.addImage( page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width) ) // 添加图像到页面,保留10mm边距 renderedHeight += pageHeight if (renderedHeight < canvas.height) { pdf.addPage() // 如果后面还有内容,添加一个空页 } } pdf.save(title + '.pdf') // 保存 PDF 文件 }) }, getDivContentAsBase64(divId) { return new Promise((resolve, reject) => { // 获取div元素 const divElement = document.querySelector(divId) if (!divElement) { console.error('未找到指定ID的div元素') reject('未找到指定ID的div元素') return } // 使用html2canvas捕捉div内容 html2Canvas(divElement, { width: divElement.offsetWidth + 4, height: divElement.offsetHeight + 6, dpi: 300, // 设置300DPI scale: 2.4, // 保持原始比例 useCORS: true, // 如果内容包含跨域图片,需要设置为true allowTaint: false // 是否允许跨域图片导致画布被污染 }) .then((canvas) => { // const pdf = new jsPDF({ // orientation: 'l', // 纵向 // unit: 'px', // 使用像素作为单位 // format: [1920, 820] // 自定义页面尺寸,与图片尺寸一致 // }); const pdf = new jsPDF({ orientation: 'l', unit: 'px', format: [canvas.width, canvas.height] }) // 将canvas转换为图片数据URL const imgData = canvas.toDataURL('image/jpeg', 1) // 1.0表示最高质量 // pdf.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height); // // 设置 PDF 页面尺寸 // // pdf.addImage(imgData, 'JPEG', 10, 10, 1920, 820) // const link = document.createElement('a'); // link.download = `${divId}-image.jpeg`; // link.href = imgData; // link.click(); // pdf.save('111.pdf') // 解决Promise并返回图片的base64字符串 // pdf.save(`${divId}-content.pdf`); resolve(imgData) }) .catch((error) => { console.error('生成图片过程中发生错误:', error) reject(error) }) }) }, createPdfFromBase64(base64Image) { return new Promise((resolve, reject) => { // 使用html2canvas捕捉div内容(这里不需要,但保留以备后续使用) // html2Canvas(divElement, { ... }).then(canvas => { // 将base64字符串转换为Blob对象 const blob = base64ToBlob(base64Image) // 创建一个URL对象 const url = URL.createObjectURL(blob) // 创建一个新的Image对象 const img = new Image() img.onload = () => { // 创建PDF对象 const pdf = new jsPDF({ orientation: 'l', unit: 'px', format: [img.width, img.height] }) // 将图片添加到PDF pdf.addImage(img, 'JPEG', 0, 0, img.width, img.height) // 获取PDF的base64字符串 const pdfBase64 = pdf.output('datauristring') // 解决Promise并返回PDF的base64字符串 resolve(pdfBase64) // 清理URL对象 URL.revokeObjectURL(url) } img.onerror = (error) => { console.error('图片加载失败:', error) reject(error) } img.src = url }) } } // 辅助函数:将base64字符串转换为Blob对象 function base64ToBlob(base64) { const binary = atob(base64.split(',')[1]) const array = [] for (let i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)) } return new Blob([new Uint8Array(array)], { type: 'image/jpeg' }) } export default htmlToPdf