How to Convert PDF to Word in the Browser with Vue 3 and pdf.js

Converting PDF to Word requires extracting text content and preserving basic formatting in a structured way.

Here's how to build a browser-based PDF to Word converter with Vue 3 and pdf.js.

The challenge: Extracting text from PDFs

PDF to Word conversion involves:

1. Parsing PDF structure to extract text
2. Preserving basic formatting (headings, lists, paragraphs)
3. Generating a .docx file with proper structure
4. Handling different PDF layouts

The stack

• Vue 3 with Composition API
• pdf.js for PDF parsing and text extraction
• docx for Word document generation
• Vite for bundling

The core implementation

<script setup lang="ts">
import { ref } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import { Document, P, Paragraph } from 'docx'

pdfjsLib.GlobalWorkerOptions.workerSrc = 
  `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`

const file = ref<File | null>(null)
const converting = ref(false)
const result = ref<Uint8Array | null>(null)

async function handleFile(e: Event) {
  const input = e.target as HTMLInputElement
  if (!input.files?.[0]) return
  file.value = input.files[0]
}

async function convertToWord() {
  if (!file.value) return
  converting.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise

  const children = []

  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i)
    const textContent = await page.getTextContent()

    // Extract and structure text
    const pageText = textContent.items.map(item => item.str).join(' ')

    children.push(new P({
      children: [new Paragraph({ text: pageText })]
    }))

    // Add page break (except last page)
    if (i < pdf.numPages) {
      children.push(new P({ children: [] }))
    }
  }

  const doc = new Document({ sections: [{ children }] })
  const buffer = await doc.toBuffer()
  result.value = buffer.buffer as Uint8Array
  converting.value = false
}
</script>

Key implementation details

1. Text extraction with pdf.js

Use pdf.js to get text items from each page:

const textContent = await page.getTextContent()
const pageText = textContent.items.map(item => item.str).join(' ')

2. Structure preservation

Group text items by their position to maintain paragraphs:

// Group by Y coordinate to detect paragraph breaks
const paragraphs = groupByY(textContent.items)

3. DOCX generation

Use the docx library to create proper Word documents:

const doc = new Document({ sections: [{ children }] })
const buffer = await doc.toBuffer()

Limitations

No image support

This implementation only extracts text, not images.

Solution: Add canvas-based image extraction for image-heavy PDFs.

Limited formatting

Complex formatting (tables, columns, custom fonts) is not preserved.

Solution: Use desktop software for complex documents.

Single-pass extraction

Text extraction order may not match visual reading order.

Solution: Sort text items by position (Y then X) before extraction.

Summary

Building a browser-based PDF to Word converter involves:

1. Using pdf.js to parse and extract text
2. Structuring text into paragraphs
3. Generating DOCX with the docx library
4. Providing download functionality

Try it at en.sotool.top/pdf-to-word.