前端 HTML 转 PDF

慷慷外婆 發表於 2026-1-16 17:40:00

<h1 data-id="heading-0">🧑‍💻 写在开头</h1>
<p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<p><strong>前端 HTML 转 PDF 的工具函数</strong>，核心作用是：把网页中指定 ID 的 DOM 元素（比如表格、报表、表单等），通过 <code>html2canvas</code> 和 <code>jspdf</code> 两个库转换成 PDF 文件并下载到本地。</p>
<p>简单说：它能让用户 “一键下载” 网页上的某个区域为 PDF（比如报表、数据统计页、合同预览页等），还预留了 “水印功能” 的注释代码（可按需启用）。</p>
<h3 data-id="heading-0">核心依赖说明</h3>
<p>函数依赖两个关键库，必须先安装才能使用：</p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202601/2149129-20260116173806831-1805805151.png" alt="ScreenShot_2026-01-16_173725_018" loading="lazy"></p>
</div>
<div>
<div>
<h3 data-id="heading-1">函数核心逻辑（分步拆解）</h3>
<p>函数名 <code>htmlToPdf</code>，接收两个参数：</p>
<ul>
<li><code>title</code>：下载的 PDF 文件名（比如 “2024 年报表”）；</li>
<li><code>htmlId</code>：需要转换的 HTML 元素的 ID（比如 <code>#report-container</code>）。</li>
</ul>
<p>整体流程：<strong>定位 HTML 元素 → 滚动置顶避免截图不全 → （可选加水印）→ HTML 转 Canvas → Canvas 转 PDF → 下载 PDF</strong></p>
<h4 data-id="heading-2">1. 准备工作：定位元素 + 滚动置顶</h4>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const element = document.querySelector(htmlId); // 找到要转PDF的HTML元素
// 滚动置顶：避免元素被滚动条遮挡，导致截图不全
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;</pre>
</div>
<div>
<div>
<h4 data-id="heading-3">2. 可选：添加水印（已注释，需启用可取消注释）</h4>
<p>注释部分的逻辑是：创建一个带文字水印（比如 “我是水印”）的 Canvas，作为背景图添加到目标元素上，转 PDF 时水印会一起被截取（适合需要版权保护的场景）。</p>
<h4 data-id="heading-4">3. HTML 转 Canvas（核心步骤）</h4>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">html2Canvas(element, {
allowTaint: true, // 允许跨域图片（如果元素内有跨域图片需开启）
useCORS: true, // 启用CORS跨域支持
scale: 2, // 缩放2倍：提升PDF清晰度（代价是文件变大）
height: element.scrollHeight, // 用元素实际滚动高度：避免只截取可视区域（关键！）
windowHeight: element.scrollHeight
}).then(canvas => {
// Canvas生成成功后，进入PDF生成步骤
});</pre>
</div>
<h4 data-id="heading-5">4. Canvas 转 PDF 并下载</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const contentWidth = canvas.width; // Canvas宽度
const contentHeight = canvas.height; // Canvas高度
const pageHeight = (contentWidth * 841.89) / 592.28; // A4纸的高度（按比例计算）
let leftHeight = contentHeight; // 未生成PDF的剩余高度
let position = 0; // PDF页面偏移量

// 创建A4尺寸的PDF（纵向："p" = portrait）
const pdf = new JsPDF("p", "pt", "a4");
// Canvas转成图片数据（jpeg格式，质量1.0）
const pageData = canvas.toDataURL("image/jpeg", 1.0);

// 处理分页：如果内容高度超过1页A4纸，自动分页
if (leftHeight < pageHeight) {
// 单页：直接嵌入图片（20是左右边距，避免内容贴边）
pdf.addImage(pageData, "JPEG", 20, 20, imgWidth, imgHeight);
} else {
// 多页：循环截取内容，每满1页添加新页面
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89; // 向下偏移A4纸高度
if (leftHeight > 0) pdf.addPage(); // 剩余内容不为空时，新增一页
}
}

// 触发下载：文件名=title+".pdf"
pdf.save(title + ".pdf");</pre>
</div>
<h3 data-id="heading-6">如何使用</h3>
<h4 data-id="heading-7">1. 安装依赖</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># npm 安装
npm install html2canvas jspdf --save

# pnpm 安装
pnpm add html2canvas jspdf</pre>
</div>
<h4 data-id="heading-8">2.创建一个htmlToPdf.js文件</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
// title:下载文件的名称  htmlId:包裹的标签的id
const htmlToPdf = (title, htmlId) => {
  const element = document.querySelector(htmlId);
  window.pageYOffset = 0;
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  setTimeout(() => {
    // // 以下注释的是增加导出的pdf水印！！！！！！！！！！！！！
    // const value = '我是水印'
    // //创建一个画布
    // let can = document.createElement('canvas')
    // //设置画布的长宽
    // can.width = 400
    // can.height = 500
    // let cans = can.getContext('2d') as any
    // //旋转角度
    // cans.rotate((-15 * Math.PI) / 180)
    // cans.font = '18px Vedana'
    // //设置填充绘画的颜色、渐变或者模式
    // cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
    // //设置文本内容的当前对齐方式
    // cans.textAlign = 'left'
    // //设置在绘制文本时使用的当前文本基线
    // cans.textBaseline = 'Middle'
    // //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
    // cans.fillText(value, can.width / 8, can.height / 2)
    // let div = document.createElement('div')
    // div.style.pointerEvents = 'none'
    // div.style.top = '20px'
    // div.style.left = '-20px'
    // div.style.position = 'fixed'
    // div.style.zIndex = '100000'
    // div.style.width = element.scrollHeight + 'px'
    // div.style.height = element.scrollHeight + 'px'
    // div.style.background =
    //   'url(' + can.toDataURL('image/png') + ') left top repeat'
    // element.appendChild(div) // 到页面中
    html2Canvas(element, {
      allowTaint: true,
      useCORS: true,
      scale: 2, // 提升画面质量，但是会增加文件大小
      height: element.scrollHeight, // 需要注意，element的高度宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面   避雷避雷！！！
      windowHeight: element.scrollHeight
    }).then(function (canvas) {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      // 一页pdf显示html页面生成的canvas高度;
      const pageHeight = (contentWidth * 841.89) / 592.28;
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight;
      // 页面偏移
      let position = 0;
      // a4纸的尺寸，html页面生成的canvas在pdf中图片的宽高  //40是左右页边距
      const imgWidth = 595.28 - 40;
      const imgHeight = (592.28 / contentWidth) * contentHeight;
      const pageData = canvas.toDataURL("image/jpeg", 1.0);
      const pdf = new JsPDF("p", "pt", "a4");
      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, "JPEG", 20, 20, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save(title + ".pdf");
    });
  }, 1000);
};
export default htmlToPdf;</pre>
</div>
<h4 data-id="heading-9">3. 在 Vue/React 中使用示例</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">
<template>
<div>

<div id="report-container">
   <h1>2024年销售报表</h1>
   <table>...</table> 
</div>

<button @click="downloadPdf">下载PDF</button>
</div>
</template>

<script>
import htmlToPdf from '@/utils/htmlToPdf'; // 导入函数

export default {
methods: {
downloadPdf() {
   // 调用函数：参数1=PDF文件名，参数2=目标元素ID（注意加#）
   htmlToPdf('2024年销售报表', '#report-container');
}
}
}
</script></pre>
</div>
<div>
<div>
<h3 data-id="heading-10">常见问题与优化</h3>
<h4 data-id="heading-11">1. 截图不全 / 内容缺失？</h4>
<ul>
<li>确保目标元素的 <code>height</code>/<code>scrollHeight</code> 正确（函数已处理，但如果元素是动态渲染的，可能需要调整 <code>setTimeout</code> 延迟时间，比如从 1000ms 改为 2000ms）；</li>
<li>避免元素内有 <code>position: fixed</code> 的内容（会被重复截取）。</li>
</ul>
<h4 data-id="heading-12">2. 图片跨域导致截图空白？</h4>
<ul>
<li>确保 <code>html2Canvas</code> 配置中 <code>allowTaint: true</code> 和 <code>useCORS: true</code> 已开启；</li>
<li>图片服务器需配置 CORS 允许当前域名访问。</li>
</ul>
<h4 data-id="heading-13">3. PDF 清晰度太低？</h4>
<ul>
<li>增大 <code>scale</code> 参数（比如改为 3），但会导致文件变大；</li>
<li>把 <code>toDataURL</code> 的质量参数从 1.0 保留（已最优）。</li>
</ul>
<h4 data-id="heading-14">4. 想要启用水印？</h4>
<ul>
<li>取消代码中水印相关的注释，修改 <code>value</code> 为你的水印文字（比如 “内部资料”）；</li>
<li>调整 <code>rotate</code> 旋转角度、<code>font</code> 字体大小、<code>fillStyle</code> 透明度（0.4 为半透明）。</li>
</ul>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19493338

頁: [1]

琼殿技术论坛's Archiver

前端 HTML 转 PDF