前端vue实现根据图片url生成pdf文件

Question

获取到当前页面多个图片的url后，如何实现将这些图片转成一个pdf文件并下载呢？
只要前端，不要后端

Answer 1

在前端 vue 中实现根据图片 URL 生成 PDF 文件的基本流程如下：

安装并引入 PDF 生成库，例如 jspdf。
定义一个函数，用于生成 PDF 文件。
利用 JavaScript 的 Canvas API，将图片 URL 转换为图片数据。
利用 PDF 生成库，在 PDF 文件中添加图片数据。
利用 JavaScript 的 Blob API 或者 saveAs 库，将 PDF 文件保存到本地并下载。
下面是一个实现根据图片 URL 生成 PDF 文件并下载的代码示例：

// 1. 安装并引入 jspdf
import JsPDF from 'jspdf'

// 2. 定义生成 PDF 文件的函数
function generatePDF(imgUrls) {
  // 3. 利用 Canvas API 转换图片 URL 为图片数据
  const promises = imgUrls.map(url => {
    return new Promise(resolve => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const img = new Image()
      img.onload = function() {
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0, 0)
        resolve(canvas.toDataURL('image/png'))
      }
      img.src = url
    })
  })

  // 4. 生成 PDF 文件
  Promise.all(promises).then(images => {
    const pdf = new JsPDF()
    images.forEach((image, i) => {
      pdf.addImage(image, 'PNG', 0, 0)
      if (i !== images.length - 1) {
        pdf.addPage()
      }
    })

    // 5. 下载 PDF 文件
    pdf.save('images.pdf')
  })
}