JS实现的pdf自动分页程序

2020-08-25

字数统计: 7.2k字 | 阅读时长≈ 34分

JS实现的pdf自动分页程序

下面由900行代码，只说使用

应用场景：

资源加载完毕后，数据处理完毕，一个html网页固定宽度，不修改dom节点样式进行自动分页

前端html铺dom节点，还有css样式渲染，有几个规范: 必须有一个 id为pdf的div节点（不是div可能有问题），我们把他叫做根节点

根节点下面必须放 class为pdf-page 的div节点（不是div可能有问题，我觉得dom分出层次结构用div比较好），我们把这个节点叫做一页pdf（但这个 pdf不需要去控制他的高度，只要往里面铺数据就好了，分页程序会自动把高度调整好）

一页pdf：页眉可有可无，页脚可有可无，页眉页脚高度不会干预，但是页内容的高度就是整个pdf高度减去页眉和页脚高度，所以当页眉页脚没有时，其实就是一个封面，但是封面请独立放在一个pdf-page节点中，还需要控制它的高度，因为封面特殊呀

好了，真正铺内容的地方需要放在

pdf-page节点下的 pdf-content节点，这个节点必须是div，

pdf-content节点下面直接子节点只要不是p节点就好，p节点有诡异问题，如果要使用p节点，那么请使用一个div包起来

pdf-content节点下面直接子节点分两种：

class为atomic-node节点，代表原子不可拆分节点

class为split-node节点, 代表可拆分节点，注意split-node节点下可以继续有split-node的直接子节点，但是每一个split-node节点下面必须有一个不是split-node节点，因为只要不是split-node节点，那么再split-node节点下面的节点默认当成原子节点处理

示例

只要是下面这种形式的就可以使用此分页算法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="css/common.css" />
    <script src="jquery.js"></script>
</head>
<body>
<!-- 宽度，分页程序不会对样式，宽度，页眉，页脚进行干预
	会对pdf-content的整体高度样式进行干预，只是为了对齐
	pdf-content下的内容节点宽高度不会干预，同样他们的样式也不会干预
-->    
<div id="pdf" style="width: 560px">
    <div class="pdf-page">
        <div class="pdf-header">我是页眉</div>
        <div class="pdf-content">
            <!-- 
				直接放在pdf-content的原子节点class必须为atomic-node
				觉得麻烦可以改一下源码，这样只是为了做个标识
			-->
            <div class="atomic-node">...</div>
            <div class="split-node">
            	<p>里面可以不用写class为atomic-node节点,只要不是split-node节点，就当成原子不可拆分节点处理</p>
                <div class="split-node">
                    <div class="split-node">
                    	<div>每一个split-node节点下面必须有一个不是split-node的节点，也就是原子节点</div>
                	</div>
                </div>
            </div>
        </div>
        <div class="pdf-footer">我是页脚</div>
    </div>
    <div class="pdf-page">...</div>
     <div class="pdf-page">...</div>
</div>
<script src="pdfPagination.js"></script>
</body>
</html>
<script>
//无论任何应用，都应该再资源，css，数据这些东西加载完成后去启动pdf分页程序
    //css没加载完，高度什么的就乱了
    //数据没加载完，dom节点可能就会乱套
    
    
  // dom资源获取完毕，并且也渲染完毕  
  document.onreadystatechange = function () {
    console.log('document.readyState:' + document.readyState)
    if (document.readyState === 'complete') {
      new PdfPaginationApplication(800).start()
    }
  }
  // 下面这句话不是多余，是double check  
  if(document.readyState === 'complete') {
     new PdfPaginationApplication(800).start()
  } 

</script>

拦截器：




源码最后一部分是一个表拦截器的示例
    
使用：

<div id="pdf" style="width: 560px">
    <div class="pdf-page">
        <div class="pdf-header">我是页眉</div>
        <div class="pdf-content">
            <div class="split-node" pdf-interceptor="table">
                <div class="support_plan_title pdf-table-title">
                    <p>您的保险计划（{{ getUserInfo.sex }}/{{ getUserInfo.age }}岁）</p>
                </div>
                <div class="pdf-table">
                    <table>
                        <tbody>
                        <tr  class="pdf-table-header" >
                            <td><b>险种名称</b></td>
                            <td><b>交费期限</b></td>
                            <td><b>保险期间</b></td>
                            <td><b>基本保额</b></td>
                            <td><b>年交保费</b></td>
                            <td><b>合计</b></td>
                        </tr>
                        <tr class="pdf-table-data">
                            <td><b>{{ bo.productName }}</b></td>
                            <td>{{ bo.chargeText }}</td>
                            <td>{{ bo.coverageText }}</td>
                            <td>{{ bo.text }}</td>
                            <td>{{ Number(bo.prem) }}元</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="pdf-footer">我是页脚</div>
    </div>
</div>
<script>
   
    let pdf = new PdfPaginationApplication(800)
    // splitNodeIntercept 是要拦截的操作，  table是拦截器的名称，这个名称pdf-content节点下的直接子dom节点的pdf-interceptor名字相等，拦截器只要实现一个方法 handleNode(node) 参数就是你需要特殊处理的节点，这里的拦截器的解释就是自定义处理被拦截节点的分页规则，不在经过分页程序自动处理，这个方法要么false，要么一个对象{ atomicNodes:[], needMergeAtFirst: true },atomicNodes就是自定义处理好分页结果的不可分原子节点数组，needMergeAtFirst：true代表 atomicNodes的第一个元素将会默认放到拦截之前正在处理的pdf-page节点中
    let interceptor = new TableComponentInterceptor('splitNodeIntercept', 'table')
    pdf.addInterceptor(interceptor)
    
  document.onreadystatechange = function () {
    console.log('document.readyState:' + document.readyState)
    if (document.readyState === 'complete') {
      pdf.start()
    }
  }
  // 下面这句话不是多余，是double check  
  if(document.readyState === 'complete') {
     pdf.start()
  } 
</script>

监听器：

1 2	目前没怎么加这个监听器，以后再修改吧

源码

import $ from 'jquery'

// =========util ↓===================
function setObject (targetObject, customObject) {
  $.each(customObject, (key, value) => {
    targetObject[key] = value
  })
}

/**
 * 只要给定节点下存在一个split-node节点的直接子元素是空的，那么返回false
 * @param node
 * @returns {boolean}
 */
function isValid (node) {
  let flag = false
  let children = node.children()
  for (let i = 0; i < children.length; i++) {
    if ($(children[i]).hasClass('split-node')) {
      if (isValid($(children[i]))) {
        // 至少有一个原子节点
        flag = true
      } else {
        // 存在一个split-node节点没有原子节点
        return false
      }
    } else {
      // 至少存在一个原子节点
      flag = true
    }
  }
  return flag
}
/**
 * 当前节点的所有子节点是否含有p节点，含有返回true
 * @param node
 * @returns {boolean}
 */
function hasPNode (node) {
  let children = node.children()
  let flag = false
  for (let i = 0; i < children.length; i++) {
    // console.log('标签名字：' + $(children[i])[0].tagName)
    if ($(children[i])[0].tagName == 'P') {
      return true
    } else {
      flag = hasPNode($(children[i]))
      // 下面是一个小逻辑问题，里面如果返回true，说明有一个p标签，所以直接返回true
      // 如果返回 false，那么遍历下一个节点
      if (flag) return true
    }
  }
  return flag
}
// =========util ↑===================

// ====== node handle helper ↓======
let NodeWrapper = (function () {
  function NodeWrapper (node) {
    this.node = node
    this.next = null
  }

  NodeWrapper.prototype.appendWrapper = function (nodeWrapper) {
    if (this.next != null) {
      this.next.appendWrapper(nodeWrapper)
    } else {
      this.node.append(nodeWrapper.node)
      this.next = nodeWrapper
    }
  }
  NodeWrapper.prototype.appendNode = function (node) {
    if (this.next != null) {
      this.next.appendNode(node)
    } else {
      this.node.append(node)
    }
  }
  NodeWrapper.prototype.getNeedHandleNode = function () {
    if (this.next != null) {
      return this.next.getNeedHandleNode()
    } else {
      return this.node
    }
  }

  NodeWrapper.prototype.deleteWrapper = function (nodeWrapper) {
    if (this.next == nodeWrapper) {
      this.next.node.remove()
      this.next = null
      return
    }
    if (this.next != null) {
      this.next.deleteWrapper(nodeWrapper)
    }
  }
  return NodeWrapper
})()
// ====== node handle helper ↑======

// pdf 分页对象，如果使用纯js编写 每一页pdf 内容，太过于蛮烦
// 所以 采用 标签节点的class属性来对html页面展示的页面进行pdf分页
// 为了方便计算 ，此处强制依赖 jq
// 为了简便：有以下规范
//    必须要有一个id为 pdf 的节点，此节点会放下pdf所有页
//    每一页的 pdf 必须有一个根节点 并且此节点的class属性必须含有 pdf-page
//    每一页pdf的根节点下 分三块， 页眉，页内容体，页脚
//    页眉:
//       同样要有一个根节点 并且 class属性必须含有 pdf-header
//    页内容体:
//       同样要有一个根节点 并且 class属性必须含有 pdf-content
//    页脚 :
//       同样要有一个根节点 并且 class属性必须含有 pdf-footer
// 注意：
//    宽度此对象不会干预，页眉和页脚的高度也不会干预，所以需要html那端手动控制页眉和页脚的展示及宽高度
// 页内容体所占 高度就是 整个一页pdf高度 减去页眉和页脚所占高度，所以html端需要控制页眉和页脚高度
// 分页规范：
//    class属性为atomic-node 的标签节点表示不可再分，程序检测到会直接添加到当前正在处理的pdf页，
// 添加失败会开启下一页，还是添加失败，程序直接报错，不再进行任何处理，还原成没有分页前的样子
//    class属性为split-node 的标签 代表此节点可以再分，程序检测到之后，会找此节点的直接子节点
//    直接子节点：如果遍历到的当前直接子节点的class属性还是 split-node，那么继续上一步操作
//             如果直接子节点的class 属性没有split-node，就当作原子不可分节点处理

let PdfPaginationApplication = (function () {
  function PdfPaginationApplication (pdfPageHeight) {
    if (typeof pdfPageHeight != 'number') return
    this.pdfPageHeight = pdfPageHeight
    this.init()
  }

  /**
     * 初始化数据结构 和 一些数据
     */
  PdfPaginationApplication.prototype.init = function () {
    // 当前一页pdf页正在处理的一个pdf数据对象
    this.currentPdfPageDataObject = {
      pdfPageNode: null, // 一个虚拟并未实际挂载的pdf-page节点
      residualHeight: 0, // 剩余高度
      pageNum: 1 // 当前页数
    }

    // 处理状态
    this.handleStatus = true

    // 是否需要分裂
    this.isNeedToSplit = true

    // 用来存储 所有处理完成每页pdf
    this.processedPdfArray = []
    // pdfRootNode 表示用来表示实际页面上存在的id为pdf节点
    this.pdfRootNode = $('#pdf').clone(true)
    $('#pdf').after(this.pdfRootNode)
    // this.pdfRootNode = $('#pdf')
    console.log('============')
    console.log($('#pdf'))
    console.log(this.pdfRootNode)
    console.log('============')
  }

  /**
     * 设置页内容体初始高度和 设置一个虚拟pdf-page节点骨架
     * node 为 用jq表示的html标签节点，此节点必须是存在页面上的一个 pdf-page节点
     * @param node
     */
  PdfPaginationApplication.prototype.setCurrentPdfPageDataObject = function (node) {
    if (!node.hasClass('pdf-page')) {
      console.log('请设置class属性pdf-page')
      this.handleStatus = false
      return
    }

    if (!this.isNeedToSplit) return

    this.isNeedToSplit = false
    // 虚拟分页
    if (this.currentPdfPageDataObject.pdfPageNode != null) {
      this.processedPdfArray.push({
        pdfPageNode: this.currentPdfPageDataObject.pdfPageNode,
        pageNum: this.currentPdfPageDataObject.pageNum
      })
      this.currentPdfPageDataObject.pageNum = this.currentPdfPageDataObject.pageNum + 1
    }

    // 下面设置当前虚拟pdf页 骨架
    this.currentPdfPageContentHeight = this.pdfPageHeight
    node.children().each((index, element) => {
      if ($(element).hasClass('pdf-header')) {
        this.handleAtomicNodeHasPNode($(element))
        console.log('header=' + $(element).outerHeight(true))
        this.currentPdfPageContentHeight = this.currentPdfPageContentHeight - $(element).outerHeight(true)
      } else if ($(element).hasClass('pdf-footer')) {
        this.handleAtomicNodeHasPNode($(element))
        console.log('footer=' + $(element).outerHeight(true))
        this.currentPdfPageContentHeight = this.currentPdfPageContentHeight - $(element).outerHeight(true)
      }
    })
    console.log('当前pdf内容体高度=' + this.currentPdfPageContentHeight)

    // skeleton.find('.pdf-content').empty()
    // content 清空处理，优化
    let skeleton = node.clone(true)
    skeleton.children().each((index, element) => {
      if ($(element).hasClass('pdf-content')) {
        if (this.perPdfPageContentIndex == index) {
          $(element).empty()
        } else {
          $(element).remove()
        }
      } else if ($(element).hasClass('pdf-header')) {
        // do nothing
      } else if ($(element).hasClass('pdf-footer')) {
        // do nothing
      } else {
        $(element).remove()
      }
    })

    setObject(this.currentPdfPageDataObject, {
      pdfPageNode: skeleton,
      residualHeight: this.currentPdfPageContentHeight
    })
  }

  PdfPaginationApplication.prototype.start = function () {
    if (typeof this.pdfPageHeight != 'number') return false

    // let children = this.pdfRootNode.children("div.pdf-page")
    this.pdfRootNode.children().each((index, element) => {
      if ($(element).hasClass('pdf-page')) {
        console.log('开始执行当前 pdf page分页处理')
        if ($(element).attr('split-immediately')) {
          console.log('当前pdf page 要求立即分到下一页，下面是此节点信息：')
          console.log($(element))
          this.isNeedToSplit = true
        } else {
          console.log('当前pdf page 不要求立即分到下一页，下面是此节点信息：')
          console.log($(element))
        }
        // this.setCurrentPdfPageDataObject($(element))
        this.handleCurrentPdfPage($(element))
      }
    })

    // 最后一页虚拟pdf page处理
    this.isNeedToSplit = true
    this.setCurrentPdfPageDataObject($(this.pdfRootNode.children('div.pdf-page')[0]))
    console.log(this.processedPdfArray)
    if (this.handleStatus) {
      // let newPdf = this.pdfRootNode.clone(true).empty()
      // this.pdfRootNode.after(newPdf)
      // 清空子节点准备加入处理好的pdf-page节点
      this.pdfRootNode.empty()
      // 原有的pdf节点直接移除
      $('#pdf').remove()
      $.each(this.processedPdfArray, (index, element) => {
        this.pdfRootNode.append(element.pdfPageNode)
        let contentHeight = this.pdfPageHeight - element.pdfPageNode.find('.pdf-header').outerHeight(true) -
                    element.pdfPageNode.find('.pdf-footer').outerHeight(true)

        element.pdfPageNode.find('.pdf-content').css({'height': contentHeight})
        element.pdfPageNode.css({height: this.pdfPageHeight})
        // 事件发射
        this.triggerPdfEvent({
          pdf: this.pdfRootNode,
          pdfPage: element
        }, 'pdfPageCompletePagination')
      })
      return true
    } else {
      console.log('你的页面不满足pdf分页规范')
    }

    this.pdfRootNode.remove()
    return false
  }

  /**
     * 处理当前实际的pdf-page节点
     * @param pdfNodePage
     */
  PdfPaginationApplication.prototype.handleCurrentPdfPage = function (pdfPageNode) {
    if (!this.handleStatus) return
    this.setCurrentPdfRootNodeHelper(pdfPageNode)
    // 对于每一页的pdf page content的下标置为-1
    this.perPdfPageContentIndex = -1
    let count = 0
    pdfPageNode.children().each((index, element) => {
      if ($(element).hasClass('pdf-content')) {
        // content位置标记
        this.perPdfPageContentIndex = index
        if (count > 0) {
          console.log('一个pdf-page内部有多个pdf-content')
          if ($(element).attr('split-immediately')) {
            console.log('需要立即分页')
            console.log($(element))
            this.isNeedToSplit = true
          } else {
            console.log('不需要立即分页')
            console.log($(element))
          }
        }
        this.setCurrentPdfPageDataObject(pdfPageNode)
        this.handleCurrentPdfContentPage($(element), pdfPageNode)
        count++
      }
    })
    this.perPdfPageContentIndex = -1
    this.removeCurrentPdfRootNodeHelper()
  }

  /**
   * 处理当前pdf-page下的pdf-content节点
   * @param pdfPageContentNode
   * @param pdfPageNode
   */
  PdfPaginationApplication.prototype.handleCurrentPdfContentPage = function (pdfPageContentNode, pdfPageNode) {
    pdfPageContentNode.children().each((index, element) => {
      if (this.handleStatus) {
        if ($(element)[0].tagName == 'P') {
          console.log('根节点是p节点，不满足规范')
          this.handleStatus = false
          return
        }
        if ($(element).hasClass('atomic-node')) {
          // if (this.handleByInterceptor($(element),'atomicNodeInterceptor')){
          //     //这个拦截 好像无意义
          //     return
          // }
          console.log('开始处理根节点是atomic-node的节点')
          this.handleAtomicNode($(element), pdfPageNode)
        } else if ($(element).hasClass('split-node')) {
          if (this.handleByInterceptor($(element), 'splitNodeInterceptor', pdfPageNode)) {
            return
          }
          this.handleSplitNodeWithPdfHelper($(element), pdfPageNode)
        }
      }
    })
  }

  /**
   * 处理指定节点内部含有p节点的节点
   * 采用上下填充两个高度为0.1px的div的方式来加上p节点额外的高度到整个节点
   * @param node
   * @returns {boolean}
   */
  PdfPaginationApplication.prototype.handleAtomicNodeHasPNode = function (node) {
    let children = node.children()
    for (let i = 0; i < children.length; i++) {
      let child = $(children[i])
      if (child.hasClass('pdf-fill-node')) {
        child.remove()
      }
    }
    // double check
    children = node.children()
    if (hasPNode(node)) {
      if (!$(children[0]).hasClass('pdf-fill-node')) {
        $(children[0]).before('<div style="height: 0.1px" class="pdf-fill-node"></div>')
      }
      if (!$(children[children.length - 1]).hasClass('pdf-fill-node')) {
        $(children[children.length - 1]).after('<div style="height: 0.1px" class="pdf-fill-node"></div>')
      }
      console.log('进行了p节点处理')
      return true
    }
    console.log('没有进行p节点处理')
    return false
  }

  /**
   * 原子不可分节点添加，注意node节点不能是p节点
   * @param node
   * @param pdfPageNode
   */
  PdfPaginationApplication.prototype.handleAtomicNode = function (node, pdfPageNode) {
    if (this.currentPdfPageContentHeight < node.outerHeight(true)) {
      console.log('原子不可分节点高度大于初始化的pdf一页内容体的高度，class属性请设置成split-node，下面是此节点详细信息：')
      console.log(node)
      this.handleStatus = false
      return
    }
    this.handleAtomicNodeHasPNode(node)
    if (this.currentPdfPageDataObject.residualHeight >= node.outerHeight(true)) {
      console.log('residualHeight=' + this.currentPdfPageDataObject.residualHeight)
      console.log('node outerHeight=' + node.outerHeight(true))
      this.currentPdfPageDataObject.residualHeight = this.currentPdfPageDataObject.residualHeight - node.outerHeight(true)
      this.currentPdfPageDataObject.pdfPageNode.find('.pdf-content').append(node.clone(true))
      // 可发射事件
    } else {
      // 设置虚拟分页标识，开始分页
      this.isNeedToSplit = true
      // 可发射事件
      this.setCurrentPdfPageDataObject(pdfPageNode)
      // 可发射事件
      this.handleAtomicNode(node, pdfPageNode)
    }
  }

  /**
   * 可分裂节点检查
   * @param node
   * @returns {boolean}
   */
  PdfPaginationApplication.prototype.splitNodeCheck = function (node) {
    // 此节点不符合规范，不处理
    if (!isValid(node)) {
      this.handleStatus = false
      return false
    }
    if (node.children().length > 0) {
      let child = node.children()[0]
      if (this.handleAtomicNodeHasPNode(node)) {
        child = node.children()[1]
      }
      if ($(child).hasClass('split-node')) return true

      let clone = node.clone(true).empty()
      clone.append($(child).clone(true))
      // p节点处理并获取实际高度
      let nodeHeight = this.getRealNodeHeightByHelper(clone)
      if (this.currentPdfPageContentHeight >= nodeHeight) return true
      console.log('*****************************************************')
      console.log('split-node节点下面有一个超过初始化pdf页内容高度的原子节点')
      console.log('页内容体初始高度：' + this.currentPdfPageContentHeight)
      console.log('节点高度：' + nodeHeight)
      console.log('*****************************************************')
    }
    this.handleStatus = false
    return false
  }

  /**
   * 检查当前pdf是不是新的一个pdf对象
   * @returns {boolean}
   */
  PdfPaginationApplication.prototype.isPdfPageNew = function () {
    if (this.currentPdfPageDataObject.residualHeight == this.currentPdfPageContentHeight) return true
    return false
  }

  PdfPaginationApplication.prototype.handleSplitNodeWithPdfHelper = function (node, pdfPageNode) {
    if (!this.handleStatus) return
    console.log('===split 处理====')
    let children = node.children() // 先获取 node的孩子，此node的孩子保证没有pdf-fill-node节点
    let index = children.length - 1 // 记录最后一个要删除的节点的位置
    // 对p标签进行pdf-fill-node节点处理
    this.handleAtomicNodeHasPNode(node)
    if (this.currentPdfPageDataObject.residualHeight >= node.outerHeight(true)) {
      // 如果当前剩余高度可以放下，则直接添加
      this.handleAtomicNode(node, pdfPageNode)
    } else {
      // 肯定有放不下的节点

      // 先检查这个节点是否符合要求
      if (!this.splitNodeCheck(node)) {
        return
      }
      // 初始化 goodNode ，绝对不能加入 pdf-fill-node（加入没多大关系）
      // goodNode专门存储放不下的节点，等待下次添加
      let goodNode = node.clone(true).empty()
      while (this.currentPdfPageDataObject.residualHeight < node.outerHeight(true) &&
      index != -1) {
        // 放不下，移除最后一个节点
        $(children[index]).remove()
        // 指针跟着动
        index--
        // 重新进行 对p节点检查和处理
        this.handleAtomicNodeHasPNode(node)
      }
      console.log('************************************')
      console.log('current pdf page residualHeight=' + this.currentPdfPageDataObject.residualHeight)
      console.log('node outerHeight=' + node.outerHeight(true))
      console.log('************************************')
      // 此时的node节点应该是可以放下的，已经获取到一个可以放下的节点
      // 现在去判断最后一个删除的节点是否可以继续放
      index++

      if ($(children[index]).hasClass('split-node')) {
        // 最后一个被删除的节点是可分裂的
        // 把当前节点包装，为了更好处理
        let nodeWrapper = new NodeWrapper(node)
        let needHandleNode = new NodeWrapper($(children[index]))
        // // 记下当前需要处理可分裂节点的子节点数
        // let tempCount = $(children[index]).children()
        // nodeWrapper和needHandleNode进行关联
        nodeWrapper.appendWrapper(needHandleNode)
        // 开始递归处理可分裂节点
        let _goodNode = this.recursionSplitNode(nodeWrapper, this.currentPdfPageDataObject.residualHeight)
        // 当前可分裂节点中不能加入的节点放入到goodNode
        goodNode.append(_goodNode)

        if (isValid(nodeWrapper.node)) {
          // node.append($(nodeWrapper.node.children()[0]))
          // console.log(node)
        } else {
          // 删除无用节点
          // 解除关联，从当前分裂点中移除正在处理的可分裂直接子节点
          nodeWrapper.deleteWrapper(needHandleNode)
          // if (this.isPdfPageNew()) {
          //   if (goodNode.children().length == tempCount) {
          //     console.log('隐藏很深的一个原子节点超过pdf页内容体初始高度')
          //     this.handleStatus = false
          //     return
          //   }
          // }
        }
      } else {
        // 最后一个被删除的子节点是原子的，所以直接放入到goodNode
        goodNode.append($(children[index]))
      }

      for (let i = index + 1; i < children.length; i++) {
        // 由于最后一个被删除的子节点被处理过了
        // 所以从最后一个被删除的子节点的上一个被删除的子节点开始
        // 添加到goodNode
        goodNode.append($(children[i]))
      }
      // 处理可以放入当前pdf页的节点
      if (node.children().length > 0) {
        this.handleAtomicNode(node, pdfPageNode)
      }
      // 虚拟分页 ↓
      this.isNeedToSplit = true
      // 可发射事件
      this.setCurrentPdfPageDataObject(pdfPageNode)
      // 虚拟分页 ↑

      // 不能加入到当前pdf页的节点，转换成页面上的实际节点
      this.convertRealNodeByHelper(goodNode)
      // 重新调用
      this.handleSplitNodeWithPdfHelper(goodNode, pdfPageNode)
    }
    console.log('===split 处理====')
  }

  /**
   * 递归处理可分裂节点，注意nodeWrapper的node节点一定要是实际挂载到页面的节点
   * 递归结束 nodeWrapper里面的node节点的实际高度少于heightLimit，也就是要插入的节点
   * 返回的goodNode就是高度限制不能放下的节点
   * @param nodeWrapper
   * @param heightLimit
   * @returns {null|*}
   */
  PdfPaginationApplication.prototype.recursionSplitNode = function (nodeWrapper, heightLimit) {
    console.log('==========递归 处理==========')
    // 通过包装器获取当前需要处理的可分裂节点
    let children = nodeWrapper.getNeedHandleNode().children()
    // 记录要删除的最后一个节点的位置
    let index = children.length - 1
    // 进行p节点特殊处理
    this.handleAtomicNodeHasPNode(nodeWrapper.node)
    if (index == -1) {
      this.handleStatus = false
      console.log('不满足规范，一个split-node节点下必须有一个原子节点，pdf分页失败')
      return null
    }
    // goodNode专门存储放不下的直接子节点，等待下次添加，注意goodNode的根节点是当前被处理的可分裂节点
    let goodNode = nodeWrapper.getNeedHandleNode().clone(true).empty()
    while (heightLimit < nodeWrapper.node.outerHeight(true) &&
    index != -1) {
      // 放不下，移除最后一个节点
      $(children[index]).remove()
      // 指针跟着动
      index--
      // 删除掉一个后进行p节点处理
      this.handleAtomicNodeHasPNode(nodeWrapper.node)
    }
    // 此时获取到一个可放入的节点
    // 判断最后删除的一个节点是否可放入
    index++

    console.log('************************************')
    console.log('current pdf page residualHeight=' + heightLimit)
    console.log('node outerHeight=' + nodeWrapper.node.outerHeight(true))
    console.log('************************************')

    if ($(children[index]).hasClass('split-node')) {
      // 最后一个被删除的节点是可分裂的
      // 使用包装器包装需要处理的节点
      let needHandleNode = new NodeWrapper($(children[index]))
      // nodeWrapper与当前needHandleNode进行关联
      nodeWrapper.appendWrapper(needHandleNode)
      // 递归获取到当前可分裂节点加不下的节点
      let _goodNode = this.recursionSplitNode(nodeWrapper, heightLimit)
      goodNode.append(_goodNode)
      if (!isValid(needHandleNode.node)) {
        // 删除无用节点
        // 解除关联，从当前分裂点中移除正在处理的可分裂直接子节点
        nodeWrapper.deleteWrapper(needHandleNode)
      }
    } else {
      // 最后一个被删除的直接子节点是不可分裂的，直接放入到goodNode里面
      goodNode.append($(children[index]))
    }
    for (let i = index + 1; i < children.length; i++) {
      // 由于最后一个被删除的子节点被处理过了
      // 所以从最后一个被删除的子节点的上一个被删除的子节点开始
      // 添加到goodNode
      goodNode.append($(children[i]))
    }
    console.log('**************************************')
    console.log('总共的子节点个数=' + children.length)
    console.log('不能被处理的子节点个数=' + goodNode.children().length)
    console.log('**************************************')
    console.log('=======递归 处理========')
    return goodNode
  }

  //= =========  帮助pdf分页的一个临时挂载节点 的操作 ↓==================

  PdfPaginationApplication.prototype.setCurrentPdfRootNodeHelper = function (pdfPageNode) {
    this.pdfRootNodeHelper = this.pdfRootNode.clone(true).empty()
    this.pdfRootNodeHelper.append(pdfPageNode.clone(true))

    let content = this.pdfRootNodeHelper.find('.pdf-content').empty()
    let clone = content.clone(true)
    content.after(clone)
    this.pdfRootNode.after(this.pdfRootNodeHelper)
  }

  PdfPaginationApplication.prototype.removeCurrentPdfRootNodeHelper = function () {
    this.pdfRootNodeHelper.remove()
  }

  PdfPaginationApplication.prototype.convertRealNodeByHelper = function (node) {
    this.pdfRootNodeHelper.find('.pdf-content').eq(0).empty()
    this.pdfRootNodeHelper.find('.pdf-content').eq(0).append(node)
  }

  PdfPaginationApplication.prototype.getRealNodeHeightByHelper = function (node) {
    this.handleAtomicNodeHasPNode(node)
    this.pdfRootNodeHelper.find('.pdf-content').eq(1).empty()
    this.pdfRootNodeHelper.find('.pdf-content').eq(1).append(node)
    return node.outerHeight(true)
  }

  // PdfPaginationApplication.prototype.clearHelper = function () {
  //   this.pdfRootNodeHelper.find('.pdf-content').eq(0).empty()
  //   this.pdfRootNodeHelper.find('.pdf-content').eq(1).empty()
  // }
  //= =========  帮助pdf分页的一个临时挂载节点 的操作 ↑==================

  // ==============添加事件 和 触发事件 操作 ↓===========

  PdfPaginationApplication.prototype.addPdfEventListener = function (callBack, eventName) {
    if (typeof callBack != 'function' || typeof eventName != 'string') {
      return
    }
    if (typeof this.reactors == 'undefined' || this.reactors == null) {
      this.reactors = {}
    }
    this.reactors[eventName] = callBack
  }

  PdfPaginationApplication.prototype.triggerPdfEvent = function (eventSource, eventName) {
    if (typeof this.reactors == 'undefined' || this.reactors == null) {
      this.reactors = {}
    }

    if (typeof this.reactors[eventName] == 'function') {
      return this.reactors[eventName](eventSource)
    }
  }

  // ==============添加事件 和 触发事件 操作 ↑===========

  // ==============添加拦截器，移除拦截器 操作 ↓==============
  /**
   * 通过拦截器处理被拦截的节点
   * @param node
   * @param operation
   * @param pdfPageNode
   * @returns {boolean}
   */
  PdfPaginationApplication.prototype.handleByInterceptor = function (node, operation, pdfPageNode) {
    // 拦截器选取和节点克隆
    let _node = node.clone(true)
    if (typeof this.interceptors == 'undefined') this.interceptors = {}
    if (typeof this.interceptors[operation] == 'undefined') {
      this.interceptors[operation] = {}
    }
    let name = node.attr('pdf-interceptor')
    let interceptor = this.interceptors[operation][name]
    if (typeof interceptor == 'undefined' || interceptor == null) {
      return false
    }
    console.log('开始执行拦截器处理')
    // 注意，给到interceptor的获取实际高度的方法，要么是 箭头函数，要么是使用let _this = this形式传递实际操作函数
    let result = interceptor.handleNode({
      node: _node,
      currentResidualHeight: this.currentPdfPageDataObject.residualHeight,
      pdfPageContentHeight: this.currentPdfPageContentHeight,
      getRealHeightFunc: node => {
        return this.getRealNodeHeightByHelper(node)
      }
    })

    if (typeof result == 'object') {
      console.log('开始执行拦截器处理完成')
      // {
      //   atomicNodes:result,
      //   needMergeAtFirst:needMergeAtFirst
      // }
      for (let i = 0; i < result['nodes'].length; i++) {
        if (i == 0) {
          if (result['needMergeAtFirst']) {
            // do nothing
          } else {
            // 虚拟分页
            this.isNeedToSplit = true
            this.setCurrentPdfPageDataObject(pdfPageNode)
          }
        }
        let nodeObj = result['nodes'][i]
        this.convertRealNodeByHelper(nodeObj.node)
        if (nodeObj.type == 'atomic') {
          this.handleAtomicNode(nodeObj.node, pdfPageNode)
        } else if (nodeObj.type == 'split') {
          this.handleSplitNodeWithPdfHelper(nodeObj.node, pdfPageNode)
        } else {
          // drop
        }
      }
      return true
    }
    console.log('拦截器不能处理，默认交给分页程序处理')
    return false
  }

  PdfPaginationApplication.prototype.addInterceptor = function (interceptor) {
    if (typeof this.interceptors == 'undefined') this.interceptors = {}
    if (typeof this.interceptors[interceptor.operation] == 'undefined') {
      this.interceptors[interceptor.operation] = {}
    }
    this.interceptors[interceptor.operation][interceptor.name] = interceptor
  }
  PdfPaginationApplication.prototype.removeInterceptor = function (interceptor) {
    if (typeof this.interceptors == 'undefined') this.interceptors = {}
    if (typeof this.interceptors[interceptor.operation] == 'undefined') {
      this.interceptors[interceptor.operation] = {}
    }
    this.interceptors[interceptor.operation][interceptor.name] = null
  }
  // ==============添加拦截器，移除拦截器 操作 ↑==============
  return PdfPaginationApplication
})()

//= ============ 一个 vue表组件 拦截器 的例子 ========================

/**
 * 拦截器只对pdf-content下的直接节点有效
 * 拦截器生效:
 *      首先要调用 pdf分页对象的addInterceptor方法
 *      拦截器有两个必填项 operation和 name
 *      operation: 对那种操作进行拦截，目前只有 splitNodeIntercept,所以operation必须为splitNodeIntercept
 *      name: 是此拦截器的名字，这需要跟pdf-content下的直接子节点的 pdf-interceptor 属性 相等
 *           例如 ： <div class='split-node' pdf-interceptor = 'interceptorName'>...</div>
 * @type {Interceptor}
 */
let TableComponentInterceptor = (function () {
  function TableComponentInterceptor (operation, name) {
    this.operation = operation
    this.name = name
  }

  /**
   * dataObject 信息如下
   * {
   *   node: _node,                      //要处理的节点，为挂载
   *   currentResidualHeight: this.currentPdfPageDataObject.residualHeight, //上一页pdf-page的剩余高度，用于合并
   *   pdfPageContentHeight:  this.currentPdfPageContentHeight,             //当前pdf-page的内容体的初始高度
   *   getRealHeightFunc: this.getRealNodeHeightByHelper                // 由于给定节点都未挂载，所以提供一个实际高度获取函数
   * }
   * @param dataObject
   * @Return 要么返回false，代表处理不了，交给分页程序分页，要么返回一个 对象
   *    数组里面放着多个对象，每一个对象的返回格式如下：
   *    {
   *        nodes: [
   *        { node: dom节点, type: 'atomic' },
   *        { node: dom节点, type: 'split'}
   *        ]
   *        needMergeAtFirst: true|false //是否要与拦截前的pdf-page进行合并
   *    }
   */
  TableComponentInterceptor.prototype.handleNode = function (dataObject) {
    if (!this.checkNodeAndDataInit(dataObject)) return false

    let handleObj = this.getHandleNode(true)

    let index = 0
    let height = dataObject['currentResidualHeight']
    let result = []
    let needMergeAtFirst = true

    for (;index < this.tableData.length;) {
      // 做层保险
      this.tableData[index].remove()

      // 当前处理对象去添加数据
      handleObj.toAppendTableDataNode.append(this.tableData[index])
      index++

      if (this.getRealHeightFunc(handleObj.currentAtomicNode) < height) {
        if (index == this.tableData.length) {
          // 表数据遍历完毕
          this.tableDataEndHandle(index, handleObj, height, result)
          break
        }
      } else {
        // 超过当前高度了，新高度设置
        height = dataObject['pdfPageContentHeight']
        if (index == 1) {
          // 说明数据只有一条的时候就超过了，那么分到下一页
          console.log('hahah')
          console.log(this.getRealHeightFunc(handleObj.currentAtomicNode))
          console.log(height)
        } else {
          // 里面加过一次数据，但是新加的数据超过了当前高度
          // 指针回退
          index--
          // 最后 加上的那一条数据移除掉
          this.tableData[index].remove()
          result.push({
            node: handleObj.currentAtomicNode,
            type: 'atomic'
          })
          // 获取一个新的处理对象
          handleObj = this.getHandleNode(false)
        }
      }
    }

    return {
      nodes: result,
      needMergeAtFirst: needMergeAtFirst
    }
  }

  /**
   * 表数据分页完成的结束处理
   * @param index
   * @param handleObj
   * @param height
   * @param result
   */
  TableComponentInterceptor.prototype.tableDataEndHandle = function (index, handleObj, height, result) {
    // 数据遍历完毕，加上表尾
    handleObj.currentAtomicNode.append(this.tableTail)
    // double check
    if (this.getRealHeightFunc(handleObj.currentAtomicNode) < height) {
      // 加上表尾还是少于剩余高度，那么处理完毕
      result.push({
        node: handleObj.currentAtomicNode,
        type: 'atomic'
      })
    } else {
      if (index == 1) {
        // 只有一条数据
        // 说明 表标题，表头和数据和表尾不能再分,处理完毕
        result.push({
          node: handleObj.currentAtomicNode,
          type: 'atomic'
        })
      } else {
        // 由多条表数据，那么最后一条数据加上表头和表尾分到下一页

        // 先把上一个的原子节点移除表尾
        this.tableTail.remove()
        // 最后添加的一条数据移除掉
        this.tableData[index - 1].remove()
        result.push({
          node: handleObj.currentAtomicNode,
          type: 'atomic'
        })

        // 获取只带表头的处理对象
        let newHandleObj = this.getHandleNode(false)
        // 添加最后一条数据
        newHandleObj.toAppendTableDataNode.append(this.tableData[index - 1])
        // 添加表尾
        newHandleObj.currentAtomicNode.append(this.tableTail)
        result.push({
          node: newHandleObj.currentAtomicNode,
          type: 'atomic'
        })
      }
    }
  }

  /**
   * 数据检查和初始化
   * @param dataObject
   * @returns {boolean}
   */
  TableComponentInterceptor.prototype.checkNodeAndDataInit = function (dataObject) {
    this.node = dataObject.node
    let children = this.node.children()
    // 检查
    if ($(children[0]).hasClass('pdf-table-title')) {
      this.tableTitle = $(children[0])
      if ($(children[1]).hasClass('pdf-table')) {
        this.tableNode = $(children[1])
        this.tableTail = $(children[2])
      } else {
        return false
      }
    } else {
      if ($(children[0]).hasClass('pdf-table')) {
        this.tableNode = $(children[0])
        this.tableTail = $(children[1])
      } else {
        return false
      }
    }

    if (this.tableNode.find('.pdf-table-header').length === 0 ||
      this.tableNode.find('.pdf-table-data').length === 0) {
      return false
    }
    // ============上面条件检查=====================

    // 获取表数据
    this.tableData = []
    this.tableNode.find('.pdf-table-data').each((index, element) => {
      this.tableData.push($(element))
    })

    this.getRealHeightFunc = dataObject['getRealHeightFunc']
    return true
  }

  /**
   * needTableTitle = true 表示获取的根节点需要一个表标题
   * @param needTableTitle
   * @returns {{currentAtomicNode: MediaStream | Response | MediaStreamTrack | Request, toAppendTableDataNode: (*|null)}}
   * 返回 一个用于计算处理的原子节点 和 一个去添加表数据的节点
   */
  TableComponentInterceptor.prototype.getHandleNode = function (needTableTitle) {
    let goodNode = this.node.clone(true)
    goodNode.children().each((index, element) => {
      if ($(element).hasClass('pdf-table-title')) {
        if (!needTableTitle) $(element).remove()
      } else if ($(element).hasClass('pdf-table')) {
        // do nothing
      } else {
        $(element).remove()
      }
    })

    let parent = goodNode.find('.pdf-table-data').parent()
    parent.children().each((index, element) => {
      if ($(element).hasClass('pdf-table-data')) {
        $(element).remove()
      }
    })

    return {
      currentAtomicNode: goodNode,
      toAppendTableDataNode: parent
    }
  }

  return TableComponentInterceptor
})()

let TopicInterceptor = (function () {
  function TopicInterceptor (name) {
    this.name = name
    this.operation = 'splitNodeIntercept'
  }
  TopicInterceptor.prototype.handleNode = function (dataObject) {
    if (!this.checkAndInit(dataObject)) return false
    let node = this.getHandleNode()
    let getRealHeightFunc = dataObject['getRealHeightFunc']
    let height = 0
    let result = []
    node.append(this.topicNode)
    node.append($(this.children[1]))
    let index = 2

    if (getRealHeightFunc(node) > dataObject['pdfPageContentHeight']) {
      return false
    } else if (getRealHeightFunc(node) > dataObject['currentResidualHeight']) {
      height = dataObject['pdfPageContentHeight']
    } else {
      height = dataObject['currentResidualHeight']
    }

    while (getRealHeightFunc(node) <= height) {
      if (index == this.children.length) {
        return {
          nodes: [
            {node: node, type: 'atomic'}
          ],
          needMergeAtFirst: true
        }
      } else {
        node.append($(this.children[index]))
        index++
      }
    }
    index--
    $(this.children[index]).remove()
    result.push({
      node: node,
      type: 'atomic'
    })
    node = this.getHandleNode()
    for (let i = index; i < this.children.length; i++) {
      node.append($(this.children[i]))
    }
    result.push({
      node: node,
      type: 'split'
    })
    return {
      nodes: result,
      needMergeAtFirst: true
    }
  }
  TopicInterceptor.prototype.checkAndInit = function (dataObject) {
    this.node = dataObject.node
    this.children = this.node.children()
    if (!$(this.children[0]).hasClass('pdf-topic')) return false
    if (this.children.length < 2) return false
    this.topicNode = $(this.children[0])
    return true
  }

  TopicInterceptor.prototype.getHandleNode = function () {
    return this.node.clone(true).empty()
  }
  return TopicInterceptor
})()
export {
  PdfPaginationApplication,
  TableComponentInterceptor,
  TopicInterceptor
}

本文作者： 忘忧症
本文链接： https://NepenthesZGW.github.io/2020/08/25/web/pdf分页/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！