2021-12-03 react+html2canvas页面转为图片或者pdf

关注

原创最新推荐文章于 2026-05-05 23:58:13 发布 744 阅读 AI 写同款· GEO 优化 ›

使用Claude AI快速生成动态HTML幻灯片：告别传统PPT制作烦恼 HTML幻灯片是基于HTML、CSS和JavaScript技术的现代化演示解决方案，通过浏览器原生渲染实现内容展示。其核心原理在于利用语义化标签构建结构，CSS3控制样式与动画，JavaScript处理交互逻辑。相比传统PPT工具，HTML幻灯片具有文件体积小、跨平台兼容性强、动画效果丰富等技术优势，特别适合技术分享、产品演示等场景。借助Claude AI助手，用户可以通过自然语言描述快速生成响应式设计的动态幻灯片，实现内容与样式的智能分离。这种方法大幅降低了前端开发门槛，让开发者能够专注于演讲内容本身，而阅读详情

页面点击按钮点击出发dowanload函数

const download = () => {
    const element: HTMLElement = document.getElementById('demo'); // 需要导出的pdf页面
    html2canvas(element, {
      allowTaint: true,
      useCORS: true,
    }).then((canvas) => {
      const dataImg = new Image();
      dataImg.src = canvas.toDataURL('image/png');
      // FileSaver.saveAs(`${dataImg.src}`, `11.jpg`);
      // message.success('下载中...', 1);
      这两句是转化为图片下载下来
      const pdf = new jsPDF('p', 'pt', 'a4');
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      const pageHeight = (contentWidth / 592.28) * 841.89;
      let leftHeight = contentHeight;
      let position = 0;
      const imgWidth = 595.28;
      const imhHeight = (592.28 / contentWidth) * contentHeight;
      if (leftHeight < pageHeight) {
        pdf.addImage(dataImg.src, 'JPEG', 0, position, imgWidth, imhHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(dataImg.src, 'JPEG', 0, position, imgWidth, imhHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save('ss.pdf');
    });
  };