How to Convert Images to PDF in the Browser with Vue 3

<script setup lang="ts">
import { ref } from 'vue'
import { PDFDocument } from 'pdf-lib'

const files = ref<File[]>([])
const converting = ref(false)
const result = ref<Blob | null>(null)

async function convertToPdf() {
  if (files.value.length === 0) return
  converting.value = true

  const pdfDoc = await PDFDocument.create()

  for (const file of files.value) {
    const arrayBuffer = await file.arrayBuffer()

    let imageBytes: Uint8Array
    let imageType: 'jpg' | 'png'

    if (file.type === 'image/jpeg') {
      imageBytes = arrayBuffer
      imageType = 'jpg'
    } else if (file.type === 'image/png') {
      imageBytes = arrayBuffer
      imageType = 'png'
    } else {
      // Convert to JPEG using Canvas
      imageBytes = await convertToJpeg(arrayBuffer, file.type)
      imageType = 'jpg'
    }

    // Add page (A4 size)
    const page = pdfDoc.addPage([612, 792])

    // Embed and draw image
    const img = imageType === 'jpg' 
      ? await pdfDoc.embedJpg(imageBytes)
      : await pdfDoc.embedPng(imageBytes)

    page.drawImage(img, {
      x: 0, y: 0,
      width: page.getWidth(),
      height: page.getHeight()
    })
  }

  result.value = await pdfDoc.save()
  converting.value = false
}

// Convert any image format to JPEG
async function convertToJpeg(arrayBuffer: ArrayBuffer, mimeType: string): Promise<Uint8Array> {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')!

  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0)
      canvas.toBlob((blob) => {
        if (blob) {
          const reader = new FileReader()
          reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer))
          reader.readAsArrayBuffer(blob)
        }
      }, 'image/jpeg', 0.95)
    }
    img.src = URL.createObjectURL(new Blob([arrayBuffer]))
  })
}
</script>

if (file.type === 'image/jpeg') {
  // Direct embedding
} else if (file.type === 'image/png') {
  // Direct embedding
} else {
  // Convert via Canvas
}

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
canvas.toBlob((blob) => { /* convert to bytes */ }, 'image/jpeg', 0.95)

function fitImage(imgWidth: number, imgHeight: number, pageWidth: number, pageHeight: number) {
  const scale = Math.min(pageWidth / imgWidth, pageHeight / imgHeight)
  return {
    width: imgWidth * scale,
    height: imgHeight * scale
  }
}

const BATCH_SIZE = 20
for (let i = 0; i < files.value.length; i += BATCH_SIZE) {
  const batch = files.value.slice(i, i + BATCH_SIZE)
  await processBatch(batch, pdfDoc)
}