60 lines
2.0 KiB
JavaScript
60 lines
2.0 KiB
JavaScript
|
import html2canvas from 'html2canvas';
|
|||
|
|
import jsPDF from 'jspdf';
|
|||
|
|
import caseApi from "@/api/lawenforcement/Case.js";
|
|||
|
|
import {ElMessage} from "element-plus";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 用Vue组件设计HTML模板
|
|||
|
|
* 将HTML转换为Canvas
|
|||
|
|
* 将Canvas插入PDF并下载
|
|||
|
|
* @param pdfTemplate 导出区域div ref
|
|||
|
|
* @param fileName 导出的pdf文件名
|
|||
|
|
* @returns {Promise<void>}
|
|||
|
|
*/
|
|||
|
|
const exportPDF = async (pdfTemplate,fileName) => {
|
|||
|
|
try {
|
|||
|
|
const element = pdfTemplate.value;
|
|||
|
|
const canvas = await html2canvas(element, { scale: 2, onclone: (clonedDoc) => {
|
|||
|
|
clonedDoc.querySelectorAll('*').forEach(el => {
|
|||
|
|
el.style.transform = 'translateZ(0)'; // 强制 GPU 渲染
|
|||
|
|
});
|
|||
|
|
} }); // 提高分辨率
|
|||
|
|
const imgData = canvas.toDataURL('image/jpeg', 0.8);
|
|||
|
|
|
|||
|
|
const pdf = new jsPDF('p', 'mm', 'a4');
|
|||
|
|
const pageWidth = pdf.internal.pageSize.getWidth();
|
|||
|
|
const pageHeight = pdf.internal.pageSize.getHeight();
|
|||
|
|
const imgRatio = canvas.width / canvas.height;
|
|||
|
|
const imgHeight = pageWidth / imgRatio;
|
|||
|
|
|
|||
|
|
// 添加图片到PDF（自动分页）
|
|||
|
|
let heightLeft = imgHeight;
|
|||
|
|
let position = 0;
|
|||
|
|
|
|||
|
|
pdf.addImage(imgData, 'JPEG', 0, position, pageWidth, imgHeight);
|
|||
|
|
heightLeft -= pageHeight;
|
|||
|
|
|
|||
|
|
while (heightLeft >= 0) {
|
|||
|
|
position = heightLeft - imgHeight;
|
|||
|
|
pdf.addPage();
|
|||
|
|
pdf.addImage(imgData, 'JPEG', 0, position, pageWidth, imgHeight);
|
|||
|
|
heightLeft -= pageHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回 Promise 包装的导出结果
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
try {
|
|||
|
|
pdf.save(fileName);
|
|||
|
|
// 假设浏览器在 500ms 内触发下载（根据实际情况调整时间）
|
|||
|
|
setTimeout(() => {
|
|||
|
|
resolve({ success: true, message: 'PDF导出成功！' });
|
|||
|
|
}, 500);
|
|||
|
|
} catch (error) {
|
|||
|
|
reject({ success: false, message: '导出失败：' + error.message });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
return Promise.reject({ success: false, message: '生成PDF出错：' + error.message });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
export { exportPDF }
|