[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();