JS 把多个图片合并成一个PDF文件

今天做了个图片合并成PDF需求，使用了jsPDF来生成PDF文档，下面来记录一下开发中遇到的问题，及解决方法

首先要下载并且引入对应的npm包

安装npm包

npm install jspdf --save
# or
yarn add jspdf

在项目中引入

import {jsPDF} from 'jspdf';

基本使用方法

1.创建pdf对象

const recordPdf = new jsPDF('p', 'px', [width, height])

• 第一个参数: 方向=>l(横向) /p(纵向)
• 第二个参数:测量单位('px','mm','cm''m','px') 注：一页pdf的宽/高不能超过14400测量单位
• 第三个参数:默认是'a4'格式，也可以传递自定义格式 代表当前页的pdf宽高例如[500,800]

2.recordPdf.addPage() 在PDF文档中添加新页面,参数如下，可以不设置，默认a4

addPage.png

• 第一个参数是:格式
• 第二个参数是:方向=>l(横向) /p(纵向)

3.recordPdf.addImage() 把图片添加到PDF， addImage参数设置如下

addImage.png

• 第一个参数：图片文件(url、base64等)
• 第二个参数：图片格式('jpeg'、'png'、'webp')
• 第三个参数：把图片放在PDF里面的时候的X轴的起始位置
• 第四个参数：把图片放在PDF里面的时候的Y轴的起始位置
• 第五个参数：图片的宽度
• 第六个参数：图片的高度
• 第七个参数：图片的别名
• 第八个参数：图片压缩的程度('NONE'、'FAST'、'MEDIUM'、'SLOW')
• 第九个参数：图片旋转度数

4.删除最后一页pdf

let targetPage = recordPdf.internal.getNumberOfPages(); //获取总页
recordPdf.deletePage(targetPage); // 删除目标页

5.保存pdf文档

recordPdf.save("PDF存档.pdf")

项目案例

async saveToPDF() {
  // 生成pdf
  // 第一个参数：l横向，p纵向
  // 第二个参数：计量单位: cm mm px等
  // 第三个参数：格式: 默认a4
  this.saveLoading = false
  const { maxWidth, maxHeight } = await this.getAllHeight()
  const recordPdf = new jsPDF('p', 'px', [maxWidth, maxHeight])
  // 从top的位置开始加图片
  for (let i = 0; i < this.imgList.length; i++) {
    const { url } = this.imgList[i]
    const { width, height } = await this.getImgWidthHeight(url)
    recordPdf.addImage(url, 'png', 1, 1, width, height)
    recordPdf.addPage([maxWidth, maxHeight])
  }
  // 删除最后一页留白
  const targetPage = recordPdf.internal.getNumberOfPages()
  recordPdf.deletePage(targetPage)
  recordPdf.save('PDF存档.pdf')
},
// 获取图片数组里面最大的宽度和高度
async getMaxWidthHeight() {
  const widthList = []
  const heightList = []
  let maxHeight = 0
  let maxWidth = 0
  for (let i = 0; i < this.imgList.length; i++) {
    const { url } = this.imgList[i]
    const { width, height } = await this.getImgWidthHeight(url)
    widthList.push(width)
    heightList.push(height)
  }
  // 把数组变成升序然后倒过来取第一个就是拿最大宽度
  maxWidth = widthList.sort().reverse()[0]
  maxHeight = heightList.sort().reverse()[0]
  return {
    maxWidth,
    maxHeight,
  }
},
//获取图片宽高
getImgWidthHeight(src) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = src
    // 图片是否有缓存 如果有缓存可以直接拿 如果没有缓存 需要从onload拿
    if (img.complete) {
      const { width, height } = img
      resolve({
        width,
        height,
      })
    } else {
      img.onload = function () {
        const { width, height } = img
        resolve({
          width,
          height,
        })
      }
    }
  })
},

效果图

Sep-07-2022 18-37-20.gif

Sep-07-2022 18-37-13.gif