57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
|
import html2Canvas from 'html2canvas'
|
|||
|
|
import jsPDF from 'jspdf'
|
|||
|
|
|
|||
|
|
export const exportToPDF = async (elementId: string, filename = 'document.pdf') => {
|
|||
|
|
const element = document.getElementById(elementId)
|
|||
|
|
if (!element) return
|
|||
|
|
await html2Canvas(element, {
|
|||
|
|
useCORS: true,
|
|||
|
|
allowTaint: true,
|
|||
|
|
logging: false,
|
|||
|
|
scale: 2,
|
|||
|
|
backgroundColor: '#fff',
|
|||
|
|
}).then((canvas: any) => {
|
|||
|
|
const pdf = new jsPDF('p', 'mm', 'a4')
|
|||
|
|
const pageWidth = 190 // 保留边距后的有效宽度
|
|||
|
|
const pageHeight = 277 // 保留边距后的有效高度 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
|
|||
|
|
const imgHeight = (pageHeight * canvas.width) / pageWidth
|
|||
|
|
|
|||
|
|
let renderedHeight = 0
|
|||
|
|
while (renderedHeight < canvas.height) {
|
|||
|
|
const pageCanvas = document.createElement('canvas')
|
|||
|
|
pageCanvas.width = canvas.width
|
|||
|
|
pageCanvas.height = Math.min(imgHeight, canvas.height - renderedHeight)
|
|||
|
|
|
|||
|
|
pageCanvas
|
|||
|
|
.getContext('2d')!
|
|||
|
|
.putImageData(
|
|||
|
|
canvas
|
|||
|
|
.getContext('2d')!
|
|||
|
|
.getImageData(
|
|||
|
|
0,
|
|||
|
|
renderedHeight,
|
|||
|
|
canvas.width,
|
|||
|
|
Math.min(imgHeight, canvas.height - renderedHeight),
|
|||
|
|
),
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
pdf.addImage(
|
|||
|
|
pageCanvas.toDataURL('image/jpeg', 1.0),
|
|||
|
|
'JPEG',
|
|||
|
|
10,
|
|||
|
|
10, // 左边距和上边距
|
|||
|
|
pageWidth,
|
|||
|
|
Math.min(pageHeight, (pageWidth * pageCanvas.height) / pageCanvas.width),
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
renderedHeight += imgHeight
|
|||
|
|
if (renderedHeight < canvas.height) {
|
|||
|
|
pdf.addPage()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
pdf.save(filename)
|
|||
|
|
})
|
|||
|
|
}
|