一次做a4分页的记录

身为前端大废物，大家都不想改的bug就都给我了，大概就是解决这么一个bug

图片太大了，然后打印的时候就g了，但是打印组件都有各种各样的问题，看了看bug历史记录，大哥的不转图片css会丢失，大概就是这样

刚开始我们组长说用富文本编辑器，然后我发现需要自己重写双向绑定的方法，然后我放弃了。
   你为什么不用富文本？
   我不会
   你不会学吗
   富文本满足不了业务
   什么业务这么恶心
   @￥%&*@
   真恶心，你把产品找来
   我骂不过
   那你自己想办法吧
.... 好的，身为一个废物，最直接的就是解决业务层的问题，他断了那就下一页，我垃圾，但是没说垃圾不能废物利用啊

async handleSubmit() {
  // 这个东西就是大哥写的层次结构的类名
  const classNode = ['top', 'text', 'footer', 'footBox']
  const dom = {}
  classNode.forEach(v => {
    dom[v] = this.$el.querySelector(`.${v}`)
  })
  const contentDom =  [dom.top, ...dom.text.children, dom.footer, dom.footBox]
  // 别问这个cavans是个啥，啥也不是就是一张图片
  const canvas = []
  for (let index = 0; index < contentDom.length; index++) {
    const url = await domtoimage.toPng(contentDom[index])
    // 本来准备只传url，但是想了想，写都写了，不用就是王八蛋
    // contentUrl.push(url)
    const itop = new Image()
    itop.src = url
    canvas.push(itop)
  }
  this.$app.emit('open:model:official:print:preview', {
    imgNode: canvas,
    url: this.url
  })
  return true
}
 

好的，准备工作做完了，最简单粗暴且傻逼的分页功能

appendImage() {
  const pageHeight = 1122.52 - 240 // a4纸张的高度 + 业务边距
  // 内容盒子就是你装图片的盒子
  let contentDom = this.$el.querySelector('.preview__content')
  // 大容器，所有分页都是他的子集 this.$el拿不到，我也不知道为什么，但是他真的拿不到，然后我就放弃了this.$el改用document
  const page = document.querySelector('.preview')
  let innerHeight = 0 // 当前盒子内容区已占用的高度
  this.datas.imgNode.forEach(v => {
    innerHeight += v.height
    // 先加后判断，溢出的时候该分页的
    if (innerHeight > pageHeight) {
      const addpage = document.createElement('div')
      addpage.style.width = '210mm'
      addpage.style.height = '297mm'
      // 下面几个css是业务强耦合不用看了
      addpage.style.padding = '120px 40px'
      addpage.classList.add('preview__content')
      addpage.style.backgroundImage = `url(${this.datas.url})`
      addpage.style.backgroundPosition = `-20px 20px`
      // addpage.style.border = '1px solid'
      contentDom = addpage
      page.appendChild(addpage)
      // 这里是防止单张图片大于整张的高度，这里就直接截断了，太大了，俺受不了/doge
      if (v.height > innerHeight) {
        innerHeight = 0
        const overDiv = document.createElement('div')
        overDiv.style.overflow = 'hidden'
        overDiv.style.height = pageHeight
        overDiv.appendChild(v)
        innerHeight = v.height
      } else {
        innerHeight = v.height
        contentDom.appendChild(v)
      }
    } else {
      contentDom.appendChild(v)
    }
  })
  // 这个时候其实已经结束了，但是测试姐姐非要最后一的那个元素在页面的最下面，那就满足测试姐姐吧
  const imgs = document.querySelectorAll('img')
  const lastImg = imgs[imgs.length - 1]
  lastImg.style.position = 'absolute'
  lastImg.style.bottom = '0px'
  lastImg.style.left = '120px'
}

其实这就是一个最最简单的解决方案，在网上查资料的时候发现jspdf + html2canvas 能完美解决，但是我在用cdn挂载jspdf的时候构造函数一直不行，所以最后就自己干吧