html2canvas前端生成PDF开箱即用

目录

1.下载html2canvas、jspdf

2.创建工具类exportPdf 文件

3.页面中使用

需求：将页面展示的所有信息都导出一个pdf文件 

实现前端生成PDF只要3步 

1.下载html2canvas、jspdf

npm i [email protected]
npm i [email protected]

2.创建工具类exportPdf js文件 复制即用

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import $ from 'jquery'

/**
 * 单页pdf
 */
function Recurrence (el) {
  let nodes = $(el).children()
  if (nodes.length) {
    let backgroundColor = el.style.backgroundColor
    for (let i = 0; i < nodes.length; i++) {
      if (nodes[i].tagName === 'SPAN' || nodes[i].tagName === 'STRONG' || nodes[i].tagName === 'EM') {
        if (!nodes[i].style.backgroundColor && backgroundColor) {
          nodes[i].style.backgroundColor = backgroundColor
        }
        Recurrence(nodes[i])
      } else {
        Recurrence(nodes[i])
      }
    }
  }
}
export function printOut (title, id, isDownload = true, isImage = false) {
  return new Promise((resolve, reject) => {
    id = document.getElementById(id)
    window.pageYoffset = 0 // 滚动置顶
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    html2Canvas(id, {
      // 允许跨域图片的加载
      useCORS: true,
      dpi: 300, // 将分辨率提高到特定的DPI
      // dpi: window.devicePixelRatio, //将分辨率提高到特定的DPI
      scale: 2, // 按比例增加分辨率
      // letterRendering: true,
      height: id.scrollHeight + 600,
      width: id.scrollWidth
    }).then(function (canvas) {
      if (isImage) {
        let file = canvas.toDataURL('image/png')
        resolve(file)
      } else {
        var context = canvas.getContext('2d')
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false
        context.webkitImageSmoothingEnabled = false
        context.msImageSmoothingEnabled = false
        context.imageSmoothingEnabled = false
        var imgData = canvas.toDataURL('image/', 1.0) // 转化成base64格式
        var img = new Image()
        img.src = imgData
        img.onload = function () {
          img.width = img.width / 2
          img.height = img.height / 2
          img.style.transform = 'scale(0.5)'
          if (this.width > this.height) {
            // 此可以根据打印的大小进行自动调节
            var doc = new JsPDF('l', 'mm', [
              this.width * 0.505,
              this.height * 0.545
            ])
          } else {
            var doc = new JsPDF('p', 'pt', [
              this.width * 0.505,
              this.height * 0.545
            ])
          }
          doc.addImage(
            imgData,
            'jpeg',
            0,
            0,
            this.width * 0.505,
            this.height * 0.545
          )

          if (isDownload) {
            doc.save(title + '.pdf')
            resolve()
          } else {
            resolve(doc.output('datauristring'))
          }
        }
      }
    }).catch(err => { reject(err) })
  })
}

/**
 * 单页pdf
 */
export function getSinglePdf (title, id, isDownload = false) {
  return new Promise((resolve, reject) => {
    id = document.getElementById(id)
    window.pageYoffset = 0 // 滚动置顶
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    var that = this
    var shareContent = id // 需要截图的包裹的（原生的）DOM 对象
    // 打印看有没有获取到dom
    var width = shareContent.offsetWidth // 获取dom 宽度
    var height = shareContent.offsetHeight // 获取dom 高度
    var canvas = document.createElement('canvas') // 创建一个canvas节点
    var scale = 2 // 定义任意放大倍数 支持小数
    canvas.width = width * scale // 定义canvas 宽度 * 缩放
    canvas.height = height * scale // 定义canvas高度 *缩放
    canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
    html2Canvas(id, {
      // 允许跨域图片的加载
      useCORS: true,
      dpi: window.devicePixelRatio // 将分辨率提高到特定的DPI 提高四倍
      // scale: 2, //按比例增加分辨率
    }).then(function (canvas) {
      var context = canvas.getContext('2d')
      // 【重要】关闭抗锯齿
      context.mozImageSmoothingEnabled = false
      context.webkitImageSmoothingEnabled = false
      context.msImageSmoothingEnabled = false
      context.imageSmoothingEnabled = false
      var imgData = canvas.toDataURL('image/', 1.0) // 转化成base64格式
      var img = new Image()
      img.src = imgData
      img.onload = function () {
        img.width = img.width / 2 // 因为在上面放大了2倍，生成image之后要/2
        img.height = img.height / 2
        img.style.transform = 'scale(0.5)'
        if (this.width > this.height) {
          // 此可以根据打印的大小进行自动调节
          var doc = new JsPDF('l', 'mm', [
            this.width * 0.555,
            this.height * 0.555
          ])
        } else {
          var doc = new JsPDF('p', 'mm', [
            this.width * 0.555,
            this.height * 0.555
          ])
        }
        doc.addImage(
          imgData,
          'jpeg',
          10,
          0,
          this.width * 0.505,
          this.height * 0.545
        )
        if (isDownload) {
          doc.save(title + '.pdf')
          resolve()
        } else {
          resolve(doc.output('datauristring'))
        }
      }
    }).catch(err => { reject(err) })
  })
}

/**
 * 分页pdf
 * @param {*} title 标题
 * @param {*} id 容器id
 * @param {*} isDownload  是否下载
 */
export function getPdf (title, id, isDownload = false) {
  return new Promise((resolve, reject) => {
    let dom = document.querySelector(`#${id}`)

    // 截图前去掉文字背景色 html2Cancs插件不支持内联DOM背景色区分
    let creditAnalysis = dom.getElementsByClassName('need-line-change')[0]
    if (creditAnalysis) {
      let spanBg = creditAnalysis.querySelectorAll('span')
      spanBg.forEach(item => {
        item.style.backgroundColor = 'transparent'
        item.style.border = 'none'
      })
    }

    // 截图前将包含背景色的问题拆分成单个标签 html2Cancs插件不支持内联DOM背景色区分
    // let creditAnalysis = dom.getElementsByClassName('need-line-change')[0]
    // Recurrence(creditAnalysis)
    // let spanBg = creditAnalysis.querySelectorAll('span, em, strong')
    // spanBg.forEach(item => {
    //   if (item.style.backgroundColor && item.style.backgroundColor !== 'rgb(255, 255, 255)') {
    //     let backgroundColor = item.style.backgroundColor
    //     item.style.backgroundColor = 'transparent'
    //     let word = item.firstChild.nodeValue ? item.firstChild.nodeValue.split('').reverse() : []
    //     item.firstChild.nodeValue = ''
    //     if (word.length) {
    //       word.forEach(text => {
    //         let span = document.createElement(item.tagName.toLowerCase())
    //         span.innerText = text
    //         span.style.marginLeft = '-1px'
    //         span.style.backgroundColor = backgroundColor
    //         item.prepend(span)
    //       })
    //     }
    //   } else {
    //     item.style.backgroundColor = 'transparent'
    //   }
    // })

    html2Canvas(dom, {
      allowTaint: true,
      height: dom.scrollHeight,
      width: dom.scrollWidth
    }).then(function (canvas) {
      let contentWidth = canvas.width
      let contentHeight = canvas.height
      let pageHeight = contentWidth / 592.28 * 841.89
      let leftHeight = contentHeight
      let position = 0
      let imgWidth = 595.28
      let imgHeight = 592.28 / contentWidth * contentHeight
      let pageData = canvas.toDataURL('image/jpeg', 1.0)
      let PDF = new JsPDF('', 'pt', 'a4')
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          if (leftHeight > 0) {
            PDF.addPage()
          }
        }
      }
      if (isDownload) {
        PDF.save(title + '.pdf')
      } else {
        resolve(PDF.output('datauristring'))
      }
    }).catch(err => { reject(err) })
  })
}
/*
  将base64转换为文件,接收2个参数，第一是base64，第二个是文件名字
  最后返回文件对象
*/
export function dataURLtoFile (dataurl, filename) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}

3.页面中使用 引入exportPdf文件

import { printOut, getPdf, getSinglePdf } from 'src/utils/exportPdf' // PDF

id为需要截图的范围

触发事件调用exportPdf文件导出方法

 downloadPdf () {
      let title = 'pdf导出' // 导出文件名称
      printOut(title, 'pdfWarp').then((res) => {
        // 调用即可完成pdf导出
     
      })
    },