feat(property-marketing): 新增PDF导出功能并优化投放指南页面交互

src/views/property-marketing/put-account/investment-guidelines/constants.ts

@@ -1,6 +1,10 @@
 import top1 from '@/assets/img/captcha/top1.svg';
 import top2 from '@/assets/img/captcha/top2.svg';
 import top3 from '@/assets/img/captcha/top3.svg';
+import { fetchUploadFile } from '@/api/all';
+import { jsPDF } from 'jspdf';
+import html2canvas from 'html2canvas';
+import axios from 'axios';
 
 /**
  * 根据评分获取对应的星星图标路径
@@ -27,3 +31,49 @@ export enum AiResultStatus {
   FAILED = 2, // 失败
   SUCCESS = 3, // 成功
 }
+
+/**
+ * 将指定 DOM 元素导出为 PDF Blob
+ * @param elementSelector - 要导出的 DOM 元素选择器
+ */
+export const generatePDF = async (elementSelector: string): Promise<Blob> => {
+  const sections = document.querySelectorAll(elementSelector);
+  const pdf = new jsPDF('p', 'mm', 'a4');
+  let position = 0;
+  for (const section of sections) {
+    if ((section as HTMLElement).children.length === 0) continue;
+    const canvas = await html2canvas(section as HTMLElement, {
+      ignoreElements: (element) => element.classList.contains('ignore-export'),
+      scale: 2,
+      useCORS: true,
+    });
+    const imgData = canvas.toDataURL('image/png');
+    const imgProps = pdf.getImageProperties(imgData);
+    const pdfWidth = pdf.internal.pageSize.getWidth();
+    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
+    pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
+    position += pdfHeight + 10;
+  }
+  return pdf.output('blob');
+};
+
+/**
+ * 上传 PDF 并返回文件 URL
+ * @param fileName - PDF 文件名
+ * @param elementSelector - 要导出的 DOM 元素选择器
+ */
+export const uploadPdf = async (fileName: string, elementSelector: string): Promise<string> => {
+  const response = await fetchUploadFile({ suffix: 'pdf' });
+  const preSignedUrl = response?.data?.upload_url;
+  const fileUrl = response?.data?.file_url;
+  if (!preSignedUrl) {
+    throw new Error('未能获取有效的预签名上传地址');
+  }
+  const pdfBlob = await generatePDF(elementSelector);
+  await axios.put(preSignedUrl, pdfBlob, {
+    headers: {
+      'Content-Type': pdfBlob.type,
+    },
+  });
+  return fileUrl;
+};