html2canvas+jspdf实现下载pdf文件并添加水印

// 使用class 或者 ref 获取都可以
<div class="pdfdom" ref="pdfdom"> 
   <div data-content-group="content-group" > 不能被截断的内容 </div>
    <div data-content-item="content-item"> 不能被截断的内容 </div>
    <div data-content-item="content-item"> 不能被截断的内容 </div>
    <div data-content-item="content-item"> 不能被截断的内容 </div>
    <div data-content-group="content-group">
        <div data-content-item="content-item"> 嵌套的内容不能被截断 </div>
        <div data-content-item="content-item"> 嵌套的内容不能被截断 </div>
        <div data-content-item="content-item"> 嵌套的内容不能被截断 </div>
    </div>
</div>

import jspdf from "jspdf";
import html2canvas from "html2canvas";
import "./simhei-normal.js" // 解决pdf添加水印中文字体乱码问题 ttf转为js后引用

// 这里使用pdf添加水印
function addwatermark (pdf, watermarktext) {
  // 获取pdf页数，给pdf每一页添加水印
   var totalpages = pdf.internal.getnumberofpages();
   for (let i = 1; i <= totalpages; i++) {
     pdf.setpage(i);
     addwatermarkfill(pdf, watermarktext);
   }
   return pdf;
}
function addwatermarkfill (pdf, watermarktext) {
 let pdfw = pdf.internal.pagesize.getwidth();
 let pdfh = pdf.internal.pagesize.getheight();
 // 250是可以根据水印的大小调整的 可以优化为单水印的长和宽
 let xcount = pdfw / 250; 
 let ycount = pdfh / 250;
 // 下面的for循环的作用是在页面上铺满水印
 for (let y = 0; y < ycount; y++) {
   let ylocation = y * 250;
   for (let x = 0; x < xcount; x++) {
     let xlocation = x * 250;
     pdf.savegraphicsstate() // 保存图形状态
     pdf.setfontsize(18);       // 设置水印字体大小
     pdf.settextcolor(200);    // 设置水印颜色
    //  https://artskydj.github.io/jspdf/docs/jspdf.html#settextcolor
     pdf.setgstate(pdf.gstate({ opacity: 0.3 })) // 设置透明度为0.3
     // 这里的simhei是字体包 解决jspdf 无法使用中文问题
    //  pdf.setfont('alternate-normal');
     pdf.setfont('simhei');
    //  https://artskydj.github.io/jspdf/docs/jspdf.html#setfont
     pdf.text(watermarktext, xlocation, ylocation, { align: 'left', angle: -45});
     pdf.restoregraphicsstate()
   }
 }
 return pdf;
}
// 以上代码为添加水印逻辑处理
// pdfdom 页面dom , intervalheight 留白间距  filename 文件名 watermarktext: 水印内容
export function html2pdf (pdfdom, intervalheight, filename, watermarktext) {
  // 获取元素的高度
  function getelementheight (element) {
    return element.offsetheight;
  }
  // a4 纸宽高
  const a4_width = 592.28; const a4_height = 841.89;
  // 获取元素去除滚动条的高度
  const domscrollheight = pdfdom.scrollheight;
  const domscrollwidth = pdfdom.scrollwidth;
  // 保存当前页的已使用高度
  let currentpageheight = 0;
  // 获取所有的元素  我这儿是手动给页面添加class 用于计算高度 你也可以动态添加 这个不重要，主要是看逻辑
  // let elements = pdfdom.queryselectorall('.content-item'); // 没有嵌套逻辑可以直接获取
  // 代表不可被分页的
  const newpage = "content-item"; 
  const wholenodes = []; // 嵌套元素遍历出来 push
  // traversingnodes 当不可截断元素过大时候 递归获取子元素 
  function traversingnodes (nodes) {
    if (nodes.length === 0) return;
    nodes.foreach(element => {
      if (element.nodetype !== 1) return;
      // contentitem 不能截断标识
      // contentgroup 嵌套的父级标识
      const { contentitem: item, contentgroup: group } = element.dataset;
      if (item) {
        const elementheight = getelementheight(element);
        console.log(elementheight, "我是页面上的elementheight"); // 检查
        // 检查添加这个元素后的总高度是否超过 a4 纸的高度
        if (currentpageheight + elementheight > a4_height) {
        // 如果超过了，创建一个新的页面，并将这个元素添加到新的页面上
          currentpageheight = elementheight;
          element.classlist.add(newpage);
          console.log(element, "我是相加高度大于a4纸的元素");
        }
        currentpageheight += elementheight;
        wholenodes.push(element); // 不可截断元素存在嵌套
      } else if (group) {
        traversingnodes(element.childnodes);
      }
    });
  }
  traversingnodes(pdfdom.childnodes);
  // 遍历所有内容的高度
  // 根据 a4 的宽高等比计算 dom 页面对应的高度

  const pagewidth = pdfdom.offsetwidth;
  const pageheight = (pagewidth / a4_width) * a4_height;
  // 将所有不允许被截断的子元素进行处理 如果没有嵌套逻辑可以直接获取 有嵌套逻辑 通过 traversingnodes 遍历push
  // const wholenodes = pdfdom.queryselectorall(`.${newpage}`);
  console.log(wholenodes, "将所有不允许被截断的子元素进行处理");
  // 插入空白块的总高度
  let allemptynodeheight = 0;
  for (let i = 0; i < wholenodes.length; i++) {
    // 判断当前的不可分页元素是否在两页显示
    const toppagenum = math.ceil(wholenodes[i].offsettop / pageheight);
    const bottompagenum = math.ceil((wholenodes[i].offsettop + wholenodes[i].offsetheight) / pageheight);

    // 是否被截断
    if (toppagenum !== bottompagenum) {
      // 创建间距
      const newblock = document.createelement("div");
      newblock.classname = "empty-node";
      newblock.style.background = "#ffffff";

      // 计算空白块的高度，可以适当留出空间，根据自己需求而定
      const _h = toppagenum * pageheight - wholenodes[i].offsettop;
      newblock.style.height = _h + intervalheight + "px";

      // 插入空白块
      wholenodes[i].parentnode.insertbefore(newblock, wholenodes[i]);

      // 更新插入空白块的总高度
      allemptynodeheight = allemptynodeheight + _h + intervalheight;
    }
  }
  // 这里可以不加 页面高度会变
  //  pdfdom.setattribute(
  //   'style',
  //   `height: ${domscrollheight + allemptynodeheight}px; width: ${domscrollwidth}px;`,
  //   )

  return html2canvas(pdfdom, {
    width: pdfdom.offsetwidth,
    height: pdfdom.offsetheight,
    usecors: true,
    allowtaint: true
    // scale: 1
  }).then(canvas => {
    // dom 已经转换为 canvas 对象，可以将插入的空白块删除了
    const emptynodes = pdfdom.queryselectorall(".empty-node");
    for (let i = 0; i < emptynodes.length; i++) {
      emptynodes[i].style.height = 0;
      emptynodes[i].parentnode.removechild(emptynodes[i]);
    }
    
    const canvaswidth = canvas.width; const canvasheight = canvas.height;
    // html 页面实际高度
    let htmlheight = canvasheight;
    // 页面偏移量
    let position = 0;
   
    // 根据 a4 的宽高等比计算 pdf 页面对应的高度
    const pageheight = (canvaswidth / a4_width) * a4_height;
   
    // html 页面生成的 canvas 在 pdf 中图片的宽高
    const imgwidth = a4_width;
    const imgheight = 592.28 / canvaswidth * canvasheight;
    // 将图片转为 base64 格式
    const imagedata = canvas.todataurl("image/jpeg", 1.0);
    
    
    // 生成 pdf 实例
    let pdf = new jspdf("", "pt", "a4", true); 
    // html 页面的实际高度小于生成 pdf 的页面高度时，即内容未超过 pdf 一页显示的范围，无需分页
    if (htmlheight <= pageheight) {
      pdf.addimage(imagedata, "jpeg", 0, 0, imgwidth, imgheight);
    } else {
      while (htmlheight > 0) {
        pdf.addimage(imagedata, "jpeg", 0, position, imgwidth, imgheight);
        // 更新高度与偏移量
        htmlheight -= pageheight;
        position -= a4_height;
        if (htmlheight > 0) {
          // 在 pdf 文档中添加新页面
          pdf.addpage();
        }
      }
    }
    pdf = addwatermark(pdf, watermarktext );
    // 保存 pdf 文件
    pdf.save(`${filename}.pdf`);
  }).catch(err => {
    console.log(err);
  });
}

    import { html2pdf } from "./outpdf.js";

    const pdfdom = ref();
    html2pdf(pdfdom.value, 20, "下载pdf文件", "水印文字");