Fix for Y coordinate with new version of pdfjs

[MCMattia]

Hi @ffalt thank you a lot for this project. I have successfully been using your extractBuffer function in a browser environment.

Working with pdfjs-dist V4.0.269 I noticed that the y coordinate is slightly wrong. If you consider upgrading pdfjs I had success calculating the y coordinate in the following way:

page.getTextContent().then((content) => {
    // Content contains lots of information about the text layout and styles, but we need only strings at the moment
    pag.content = content.items.map((item) => {
        const tx = Util.transform(viewport.transform, item.transform);
        return {
            x: tx[4],
            y: tx[5] - item.height,
            str: item.str,
            dir: item.dir,
            width: item.width,
            height: item.height,
            fontName: item.fontName
        };
    });
})

This would replace the block that you currently have here

I hope this will be of help

[sujjeee]

Hey @MCMattia how did you run this in a browser environment? I'm trying to use Cloudflare Workers, and it's not working there. Could you please let me know how you ran this in a browser environment?

[MCMattia]

Hi @sujjeee,

I adapted the code of this repo. This is my version:

ExtractorPdf.ts:

import { getDocument, Util } from "pdfjs-dist";
import type { TextItem } from "pdfjs-dist/types/src/display/api";
import type { PDFDocumentProxy } from "pdfjs-dist";
import type { TextBox } from "./ExtractorTypes";

export async function extractTextBoxesFromDocument(
    document: PDFDocumentProxy,
    pageNumbers?: number[]
) {
    const textBoxes: TextBox[] = [];
    const data = await extractPdfDataFromDocument(document, pageNumbers);
    for (const page of data.pages) {
        const pageNumber = page.pageInfo.num;
        for (const content of page.content) {
            textBoxes.push({
                x: content.x,
                y: content.y,
                width: content.width,
                height: content.height,
                pageNumber: pageNumber,
                text: content.text
            });
        }
    }
    return textBoxes;
}

export async function extractPdfData(pdfName: string, pageNumbers?: number[]) {
    const document = await getDocument(pdfName).promise;

    return extractPdfDataFromDocument(document, pageNumbers);
}

export async function extractPdfDataFromDocument(
    document: PDFDocumentProxy,
    pageNumbers?: number[]
) {
    const firstPage = 1;
    const lastPage = document.numPages;
    const metadata = await document.getMetadata();
    const result: PDFExtractResult = {
        meta: {
            info: metadata.info,
            metadata: metadata.metadata ? metadata.metadata.getAll() || null : null
        },
        pages: [],
        pdfInfo: {
            numPages: lastPage,
            fingerprint: ""
        }
    };

    if (!pageNumbers) {
        pageNumbers = [];
        for (let i = 1; i <= lastPage; i++) pageNumbers.push(i);
    }

    for (const pageNumber of pageNumbers) {
        if (pageNumber >= firstPage && pageNumber <= lastPage)
            result.pages.push(await loadPage(document, pageNumber));
    }
    return result;
}

async function loadPage(document: PDFDocumentProxy, pageNumber: number) {
    const page = await document.getPage(pageNumber);
    const viewport = page.getViewport({ scale: 1.0 });
    const resultPage: PDFExtractPage = {
        pageInfo: {
            num: pageNumber,
            scale: viewport.scale,
            rotation: viewport.rotation,
            offsetX: viewport.offsetX,
            offsetY: viewport.offsetY,
            width: viewport.width,
            height: viewport.height
        },
        links: [],
        content: []
    };

    const annotations = await page.getAnnotations();
    resultPage.links = annotations
        .filter((annotation) => annotation.subtype === "Link" && !!annotation.url)
        .map((link) => link.url);

    const textContent = await page.getTextContent();
    resultPage.content = textContent.items.map((item) => {
        item = item as TextItem;
        const tx = Util.transform(viewport.transform, item.transform);
        return {
            x: tx[4],
            y: tx[5] - item.height,
            text: item.str,
            dir: item.dir,
            width: item.width,
            height: item.height,
            fontName: item.fontName
        };
    });

    return resultPage;
}

interface PDFExtractResult {
    filename?: string;
    meta?: {
        info?: {
            PDFFormatVersion?: string;
            IsAcroFormPresent?: boolean;
            IsCollectionPresent?: boolean;
            IsLinearized?: boolean;
            IsXFAPresent?: boolean;
            Title?: string;
            Author?: string;
            Creator?: string;
            Producer?: string;
            CreationDate?: string;
            ModDate?: string;
        };
        metadata?: {
            [name: string]: string;
        };
    };
    pages: Array<PDFExtractPage>;
    pdfInfo: {
        numPages: number;
        fingerprint: string;
    };
}

interface PDFExtractPage {
    pageInfo: {
        num: number;
        scale: number;
        rotation: number;
        offsetX: number;
        offsetY: number;
        width: number;
        height: number;
    };
    links: Array<string>;
    content: Array<PDFExtractText>;
}

interface PDFExtractText {
    x: number;
    y: number;
    text: string;
    dir: string;
    width: number;
    height: number;
    fontName: string;
}

ExtractorTypes.ts:

export interface TextBox {
    x: number;
    y: number;
    width: number;
    height: number;
    pageNumber: number;
    text: string;
}

[sujjeee]

@MCMattia Oh, okay, I see you are using pdfjs-dist. I also tried pdfjs-dist, but it feels slow to me in getting the Y-coordinate of a text. So basically, I was searching for the Y-coordinate of a given text from all pages of the PDF.

Nowadays, everyone is talking about Cloudflare Workers, so I thought to use this in a serverless environment, but it's not working.

[sujjeee]

Hey @MCMattia, I'm trying to use pdfjs-dist in my Next.js app.

This is essentially a function:

this is basically a function

import * as pdfjsLib from "pdfjs-dist";

export async function crop(pdfBuffer: ArrayBuffer) {
  const pdfDoc: PDFDocumentProxy = await pdfjsLib.getDocument(pdfBuffer).promise;
  // other code 
}

I'm calling this function when a button is clicked, but before that, I'm getting this error:

Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

Please let me know if you have any solutions to fix this issue.