![[AI编程]纯前端JS实现评论区自动截图生成 PDF](images/news1.jpg)
前言最近有个小需求,将页面中的流转意见部分自动截图,并且生成对应的pdf文件.实现的代码主要是ai写的,我起到一个调试的作用.具体使用的场景:泛微低代码开发平台,所以也不能算Vibe coding,完成后的嵌入功能测试后续的使用还是需要开发者来执行的.在此记录一下过程.过程把需求甩给豆包,生成代码,进行调试.个人比较习惯还是逐步拆解需求,让ai实现.某种程度防止ai幻觉?提供html2canvas的生成截图并预览的功能 (先快速验证一下思路,确认可行)因为开发环境在低代码平台,所以只能使用cdn引入的方式挂载,发现豆包最初提供的cdn地址无法访问,导致html2canvas无法加载-豆包提供国内cdn地址替换.使用jsPDF将截图转换为pdf文件.由于一开始未指定长宽方向,导致图片转为pdf后内容被截断了.-豆包提供判断逻辑调整pdf方向.让豆包根据需求调整一下生成的附件名称(这里是拼接了年月日信息)完成!整体还是比较简单清晰的,当然这两个插件的功能也很强!常用的需求都能很好的实现.总结个人感觉,如果需求明确,用ai来实现的速度很快,而且逻辑也比较严密~代码// 配置区按开发文档填写已填默认值 const CONFIG { // 截图相关 targetClass: .weapp-workflow-comment-list, // 要截图的评论区class }; // 步骤1加载国内CDN的截图库已验证可用 async function loadCaptureLibs() { if (!window.html2canvas) { await new Promise((resolve, reject) { const script1 document.createElement(script); script1.src https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js; script1.onload resolve; script1.onerror () reject(new Error(html2canvas加载失败)); document.head.appendChild(script1); }); } if (!window.jsPDF) { await new Promise((resolve, reject) { const script2 document.createElement(script); script2.src https://cdn.bootcdn.net/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js; script2.onload resolve; script2.onerror () reject(new Error(jspdf加载失败)); document.head.appendChild(script2); }); window.jsPDF window.jspdf.jsPDF; } } // 步骤2核心主流程 - 截图 async function captureAndUploadByOpenApi() { try { // 1. 加载截图库 await loadCaptureLibs(); console.log(✅ 截图库加载完成); // 2. 截图生成PDF如需图片可替换 const target document.querySelector(CONFIG.targetClass); if (!target) throw new Error(未找到截图区域请检查class); const canvas await window.html2canvas(target, { useCORS: true, backgroundColor: #ffffff }); const { jsPDF } window.jspdf; const pdf new jsPDF({ orientation: canvas.width canvas.height ? landscape : portrait, unit: px, format: [canvas.width, canvas.height], hotfixes: [px_scaling] // 修复比例问题 }); pdf.addImage(canvas, PNG, 0, 0, canvas.width, canvas.height); const pdfBlob pdf.output(blob); const now new Date(); const dateStr ${now.getFullYear()}-${String(now.getMonth() 1).padStart(2, 0)}-${String(now.getDate()).padStart(2, 0)}; const fileName 项目xxxx_${dateStr}.pdf; console.log(✅ 截图并生成PDF完成, fileName); } catch (err) { console.error(❌ 全流程失败, err); alert(❌ 操作失败${err.message}); } } // 执行主流程 captureAndUploadByOpenApi();
[AI编程]纯前端JS实现评论区自动截图生成 PDF
前言最近有个小需求,将页面中的流转意见部分自动截图,并且生成对应的pdf文件.实现的代码主要是ai写的,我起到一个调试的作用.具体使用的场景:泛微低代码开发平台,所以也不能算Vibe coding,完成后的嵌入功能测试后续的使用还是需要开发者来执行的.在此记录一下过程.过程把需求甩给豆包,生成代码,进行调试.个人比较习惯还是逐步拆解需求,让ai实现.某种程度防止ai幻觉?提供html2canvas的生成截图并预览的功能 (先快速验证一下思路,确认可行)因为开发环境在低代码平台,所以只能使用cdn引入的方式挂载,发现豆包最初提供的cdn地址无法访问,导致html2canvas无法加载-豆包提供国内cdn地址替换.使用jsPDF将截图转换为pdf文件.由于一开始未指定长宽方向,导致图片转为pdf后内容被截断了.-豆包提供判断逻辑调整pdf方向.让豆包根据需求调整一下生成的附件名称(这里是拼接了年月日信息)完成!整体还是比较简单清晰的,当然这两个插件的功能也很强!常用的需求都能很好的实现.总结个人感觉,如果需求明确,用ai来实现的速度很快,而且逻辑也比较严密~代码// 配置区按开发文档填写已填默认值 const CONFIG { // 截图相关 targetClass: .weapp-workflow-comment-list, // 要截图的评论区class }; // 步骤1加载国内CDN的截图库已验证可用 async function loadCaptureLibs() { if (!window.html2canvas) { await new Promise((resolve, reject) { const script1 document.createElement(script); script1.src https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js; script1.onload resolve; script1.onerror () reject(new Error(html2canvas加载失败)); document.head.appendChild(script1); }); } if (!window.jsPDF) { await new Promise((resolve, reject) { const script2 document.createElement(script); script2.src https://cdn.bootcdn.net/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js; script2.onload resolve; script2.onerror () reject(new Error(jspdf加载失败)); document.head.appendChild(script2); }); window.jsPDF window.jspdf.jsPDF; } } // 步骤2核心主流程 - 截图 async function captureAndUploadByOpenApi() { try { // 1. 加载截图库 await loadCaptureLibs(); console.log(✅ 截图库加载完成); // 2. 截图生成PDF如需图片可替换 const target document.querySelector(CONFIG.targetClass); if (!target) throw new Error(未找到截图区域请检查class); const canvas await window.html2canvas(target, { useCORS: true, backgroundColor: #ffffff }); const { jsPDF } window.jspdf; const pdf new jsPDF({ orientation: canvas.width canvas.height ? landscape : portrait, unit: px, format: [canvas.width, canvas.height], hotfixes: [px_scaling] // 修复比例问题 }); pdf.addImage(canvas, PNG, 0, 0, canvas.width, canvas.height); const pdfBlob pdf.output(blob); const now new Date(); const dateStr ${now.getFullYear()}-${String(now.getMonth() 1).padStart(2, 0)}-${String(now.getDate()).padStart(2, 0)}; const fileName 项目xxxx_${dateStr}.pdf; console.log(✅ 截图并生成PDF完成, fileName); } catch (err) { console.error(❌ 全流程失败, err); alert(❌ 操作失败${err.message}); } } // 执行主流程 captureAndUploadByOpenApi();
