238 lines
8.5 KiB
JavaScript
238 lines
8.5 KiB
JavaScript
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
|