开箱即用的web打印和下载，自动分页不截断哈喽哈喽🌈 哈喽大家好！我是小周🤪🤪🤪。今天我来介绍另外一种实现方式，

哈喽哈喽🌈

哈喽大家好！我是小周🤪🤪🤪。相信各位前端小伙伴都知道可以用window.print()这个方法来调用打印机实现打印功能，但是直接下载功能window.print()还是无法实现的。今天我来介绍另外一种实现方式，真正的开箱即用，既可以实现打印和直接下载，也可以防止内容截断。

技术栈

1、html2canvas

html2canvas 一个可以将html转换成canvas的三方库

2、jsPDF

jsPDF 生成pdf文件的三方库

一些用到的方法介绍

1、canvas.getContext('2d').getImageData()

canvas.getContext('2d').getImageData() 是 HTML5 Canvas API 中用于获取指定区域的像素数据的方法。它返回一个 ImageData 对象，该对象包含了指定区域中每个像素的颜色和透明度信息。

canvas.getContext('2d').getImageData(x, y, width, height)

参数说明：

• x: 采集的图像区域的左上角的水平坐标。
• y: 采集的图像区域的左上角的垂直坐标。
• width: 采集的图像区域的宽度（以像素为单位）。
• height: 采集的图像区域的高度（以像素为单位）。

返回值：

返回一个 ImageData 对象，包含以下属性：

• width: 图像数据的宽度。

• height: 图像数据的高度。

• data: 一个 Uint8ClampedArray 类型的数组，存储了区域中每个像素的颜色和透明度信息。每个像素占用 4 个元素，分别对应：

  • data[n]: 红色通道的值（0 到 255）
  • data[n+1]: 绿色通道的值（0 到 255）
  • data[n+2]: 蓝色通道的值（0 到 255）
  • data[n+3]: 透明度（alpha）通道的值（0 到 255），255 表示完全不透明，0 表示完全透明。

代码实现

1、设置 DomToPdf 类

export class DomToPdf {

_rootDom = null 
_title = 'pdf' //生成的pdf标题
_a4Width = 595.266 
_a4Height = 841.89 
_pageBackground = 'rgba(255,255,255)' //页面背景色
_hex = [0xff, 0xff, 0xff] //用于检测分页的颜色标识

//初始化状态
constructor(rootDom, title, color = [255, 255, 255]) { 
    this._rootDom = rootDom 
    this._title = title 
    this._pageBackground = `rgb(${color[0]},${color[1]},${color[2]})`
    this._hex = color 
}

}

2、设置 pdf的生成函数

  async savePdf() {
    const a4Width = this._a4Width
    const a4Height = this._a4Height
    const hex = this._hex

    return new Promise(async (resolve, reject) => {
      try {
        const canvas = await html2canvas(this._rootDom, {
          useCORS: true,
          allowTaint: true,
          scale: 0.8,
          backgroundColor: this._pageBackground,
        })
        const pdf = new jsPDF('p', 'pt', 'a4')
        let index = 1,
          canvas1 = document.createElement('canvas'),
          height
        let leftHeight = canvas.height

        let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
        let position = 0
        let pageData = canvas.toDataURL('image/jpeg', 0.7)
        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')

        function createImpl(canvas) {
          if (leftHeight > 0) {
            index++
            let checkCount = 0
            if (leftHeight > a4HeightRef) {
              let i = position + a4HeightRef
              for (i = position + a4HeightRef; i >= position; i--) {
                let isWrite = true
                for (let j = 0; j < canvas.width; j++) {
                  let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
                  if (c[0] !== hex[0] || c[1] !== hex[1] || c[2] !== hex[2]) {
                    isWrite = false
                    break
                  }
                }
                if (isWrite) {
                  checkCount++
                  if (checkCount >= 10) {
                    break
                  }
                } else {
                  checkCount = 0
                }
              }
              height =
                Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
              if (height <= 0) {
                height = a4HeightRef
              }
            } else {
              height = leftHeight
            }
            canvas1.width = canvas.width
            canvas1.height = height
            let ctx = canvas1.getContext('2d')
            ctx.drawImage(
              canvas,
              0,
              position,
              canvas.width,
              height,
              0,
              0,
              canvas.width,
              height,
            )
            if (position !== 0) {
              pdf.addPage()
            }
            pdf.setFillColor(hex[0], hex[1], hex[2])
            pdf.rect(0, 0, a4Width, a4Height, 'F')
            pdf.addImage(
              canvas1.toDataURL('image/jpeg', 1.0),
              'JPEG',
              0,
              0,
              a4Width,
              (a4Width / canvas1.width) * height,
            )
            leftHeight -= height
            position += height
            if (leftHeight > 0) {
              setTimeout(createImpl, 500, canvas)
            } else {
              resolve(pdf)
            }
          }
        }
        if (leftHeight < a4HeightRef) {
          pdf.setFillColor(hex[0], hex[1], hex[2])
          pdf.rect(0, 0, a4Width, a4Height, 'F')
          pdf.addImage(
            pageData,
            'JPEG',
            0,
            0,
            a4Width,
            (a4Width / canvas.width) * leftHeight,
          )
          resolve(pdf)
        } else {
          try {
            pdf.deletePage(0)
            setTimeout(createImpl, 500, canvas)
          } catch (err) {
            reject(err)
          }
        }
      } catch (error) {
        reject(error)
      }
    })
  }

3、设置承接pdf的方法

//直接下载pdf
  async downToPdf(setLoadParent) {
    const newPdf = await this.savePdf()
    const title = this._title
    newPdf.save(title + '.pdf')
    setLoadParent(false)
  }

//通过构造链接的形式去跳转打印页面
  async printToPdf(setLoadParent) {
    const newPdf = await this.savePdf()
    const pdfBlob = newPdf.output('blob')
    const pdfUrl = URL.createObjectURL(pdfBlob)
    setLoadParent(false)
    window.open(pdfUrl)
  }

完整代码

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
export class DomToPdf {
  _rootDom = null
  _title = 'pdf'
  _a4Width = 595.266
  _a4Height = 841.89
  _pageBackground = 'rgba(255,255,255)'
  _hex = [0xff, 0xff, 0xff]

  constructor(rootDom, title, color = [255, 255, 255]) {
    this._rootDom = rootDom 
    this._title = title
    this._pageBackground = `rgb(${color[0]},${color[1]},${color[2]})`
    this._hex = color
  }
  async savePdf() {
    const a4Width = this._a4Width
    const a4Height = this._a4Height
    const hex = this._hex

    return new Promise(async (resolve, reject) => {
      try {
        const canvas = await html2canvas(this._rootDom, {
          useCORS: true,
          allowTaint: true,
          scale: 0.8,
          backgroundColor: this._pageBackground,
        })
        const pdf = new jsPDF('p', 'pt', 'a4')
        let index = 1,
          canvas1 = document.createElement('canvas'),
          height
        let leftHeight = canvas.height

        let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
        let position = 0
        let pageData = canvas.toDataURL('image/jpeg', 0.7)
        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')

        function createImpl(canvas) {
          if (leftHeight > 0) {
            index++
            let checkCount = 0
            if (leftHeight > a4HeightRef) {
              let i = position + a4HeightRef
              for (i = position + a4HeightRef; i >= position; i--) {
                let isWrite = true
                for (let j = 0; j < canvas.width; j++) {
                  let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
                  if (c[0] !== hex[0] || c[1] !== hex[1] || c[2] !== hex[2]) {
                    isWrite = false
                    break
                  }
                }
                if (isWrite) {
                  checkCount++
                  if (checkCount >= 10) {
                    break
                  }
                } else {
                  checkCount = 0
                }
              }
              height =
                Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
              if (height <= 0) {
                height = a4HeightRef
              }
            } else {
              height = leftHeight
            }
            canvas1.width = canvas.width
            canvas1.height = height
            let ctx = canvas1.getContext('2d')
            ctx.drawImage(
              canvas,
              0,
              position,
              canvas.width,
              height,
              0,
              0,
              canvas.width,
              height,
            )
            if (position !== 0) {
              pdf.addPage()
            }
            pdf.setFillColor(hex[0], hex[1], hex[2])
            pdf.rect(0, 0, a4Width, a4Height, 'F')
            pdf.addImage(
              canvas1.toDataURL('image/jpeg', 1.0),
              'JPEG',
              0,
              0,
              a4Width,
              (a4Width / canvas1.width) * height,
            )
            leftHeight -= height
            position += height
            if (leftHeight > 0) {
              setTimeout(createImpl, 500, canvas)
            } else {
              resolve(pdf)
            }
          }
        }
        if (leftHeight < a4HeightRef) {
          pdf.setFillColor(hex[0], hex[1], hex[2])
          pdf.rect(0, 0, a4Width, a4Height, 'F')
          pdf.addImage(
            pageData,
            'JPEG',
            0,
            0,
            a4Width,
            (a4Width / canvas.width) * leftHeight,
          )
          resolve(pdf)
        } else {
          try {
            pdf.deletePage(0)
            setTimeout(createImpl, 500, canvas)
          } catch (err) {
            reject(err)
          }
        }
      } catch (error) {
        reject(error)
      }
    })
  }
  async downToPdf(setLoadParent) {
    const newPdf = await this.savePdf()
    const title = this._title
    newPdf.save(title + '.pdf')
    setLoadParent(false)
  }

  async printToPdf(setLoadParent) {
    const newPdf = await this.savePdf()
    const pdfBlob = newPdf.output('blob')
    const pdfUrl = URL.createObjectURL(pdfBlob)
    setLoadParent(false)
    window.open(pdfUrl)
  }

结束

好喽，开箱即用的打印和下载功能的实现就完成了。欢迎大家阅读，我是小周🤪🤪🤪