js html转pdf

我最近做了什么

想写很多，但是现在想不起来。。。后边再来加。。。

1、html转pdf

需要的库：

"html2canvas": "^1.4.1",
"jspdf": "^2.5.2", 

思路：

我尝试纯JS转PDF，发现有些样式无法生效，字体乱码配置太麻烦，所以放弃了
选择了比较笨的，先截图，然后图片放PDF，虽然笨但是结果有保证，除了可能会糊一点，其他没得问题
包括我们本来要对JS解读半天研究他的API，现在有啥想法直接改DOM，爽了不止一点儿

创建工具类：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export const downloadPDF = async page => {
  const canvas = await html2canvas(page, {
    useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    allowTaint: true, //允许跨域
    scale: 2, //设置放大倍数
    backgroundColor: '#ffffff', //背景色
  })
  const pdf = canvas2PDF(canvas)
  return pdf
}

const canvas2PDF = canvas => {
  // 新建JsPDF对象
  const PDF = new jsPDF({
    orientation: 'p', //参数： l：横向  p：纵向
    unit: 'mm', //参数：测量单位（'pt'，'mm', 'cm', 'm', 'in' or 'px'）
    format: 'a4', //A4纸
  })
  const ctx = canvas.getContext('2d')
  const a4w = 760
  const a4h = 1108 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
  // const a4w = 190
  // const a4h = 277 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
  const imgHeight = Math.floor((a4h * canvas.width) / a4w) //按A4显示比例换算一页图像的像素高度
  let renderedHeight = 0

  while (renderedHeight < canvas.height) {
    let page = document.createElement('canvas')
    page.width = canvas.width
    page.height = Math.min(imgHeight, canvas.height - renderedHeight) //可能内容不足一页
    //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
    page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
    // canvas转图片数据保留10mm边距
    PDF.addImage(page.toDataURL('image/jpeg', 0.2), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width))
    renderedHeight += imgHeight
    //判断是否分页，如果后面还有内容，添加一个空页
    if (renderedHeight < canvas.height) {
      PDF.addPage()
    }
  }
  PDF.save('导出.pdf') // 浏览器保存一下看看
  return PDF
}

调用，很傻但很好用

getpdfHtml() {
      let container = document.createElement('div')
      container.innerHTML = `
        <div style="xxx">
          <div>111</div>
          <div>222</div>
        </div>`
      document.body.appendChild(container)
      return container
    },

async onSubmit() {
      const pdfDom = this.getpdfHtml() // 获取想要生成pdf的dom
      const pdfFile = await downloadPDF(pdfDom) // 
      pdfDom.parentNode.removeChild(pdfDom)
}