Hướng dẫn how to read pdf file in javascript - cách đọc file pdf bằng javascript

PDF là viết tắt của định dạng tài liệu di động. PDF được thiết kế bởi Adobe trong những năm 90 cho Windows. Chúng là các tài liệu khép kín với sự hỗ trợ cho gần như tất cả các hệ điều hành chính.

Nhưng đôi khi bạn sẽ cần sửa đổi PDF cho phù hợp với nhu cầu của bạn và không chỉ xem nó. Thật không may, phần mềm có sẵn dành cho các tệp PDF thường thiếu các yêu cầu chuyên môn của bạn.

Nhưng bạn là một lập trình viên, phải không? Tại sao không tạo một số phần mềm giúp PDF hoạt động như bạn muốn? Vâng, đây là nguồn cảm hứng cho bài viết này.

Trong bài viết này, chúng tôi sẽ khám phá tất cả các thư viện liên quan đến PDF phổ biến trong JavaScript. Tại sao JavaScript? Bởi vì nó có một số gói PDF khá tốt có sẵn và mọi người thích nó. Đặc biệt là bản thân tôi.

Dự án xem pdf bạn sẽ xây dựng trong hướng dẫn này

Đây là một bản demo trực tiếp về những gì bạn sẽ xây dựng trong hướng dẫn này.

1. Đầu tiên, chúng tôi sẽ khám phá một số gói PDF phổ biến ngoài kia cho công việc liên quan đến PDF trong JavaScript. Sau đó, chúng tôi sẽ so sánh chúng và tìm gói tốt nhất phù hợp với yêu cầu của chúng tôi.
2. Tiếp theo, chúng tôi sẽ tải một tệp PDF hiện có và trích xuất một số trang từ nó. Các trang được trích xuất sẽ tạo một tài liệu PDF mới.
3. Sau đó, chúng tôi sẽ hiển thị PDF mới (mà chúng tôi đã thực hiện trong bước thứ 2) bên trong trình duyệt.
4. Cuối cùng, chúng tôi sẽ tải xuống PDF mới để sử dụng sau.

Vì vậy, đây là tất cả các bước chúng tôi sẽ đi qua đây. Tôi hy vọng bạn rất hào hứng khi thấy kết quả. Hãy đi sâu vào.

Thư viện PDF cho JavaScript

Tôi đã phát hiện ra hai loại thư viện PDF chính trong JavaScript. Một là để kết xuất PDF và cái còn lại là để thao tác PDF (hoặc sửa đổi). Tôi đã tìm thấy một loạt các thư viện PDF sau khi tìm kiếm trong một giờ hoặc lâu hơn, và đây là những lựa chọn tốt nhất của tôi.

Tất cả các gói được liệt kê ở đây là các gói miễn phí và nguồn mở. Bạn có thể tìm thấy tất cả các gói này trong sổ đăng ký NPM.

pdfjs

Gói này được sản xuất bởi Mozilla, công ty đằng sau trình duyệt web Firefox. PDFJS là một nền tảng dựa trên tiêu chuẩn web để phân tích cú pháp và hiển thị pdfs. Khi bạn xem PDF trong Firefox, trình xem PDF được tạo bằng gói PDFJS này.
When you view a PDF in Firefox, the PDF viewer is made with this pdfjs package.

Sức mạnh cốt lõi của gói này là kết xuất PDF trên một trang web. Các tính năng sửa đổi PDF khác rất hạn chế với gói này. Nếu bạn muốn tạo Trình xem PDF tùy chỉnh cho trang web của mình, có lẽ đây là gói bạn đang tìm kiếm.

PDFJ có API rất đơn giản. Họ có rất nhiều hướng dẫn để bắt đầu với thư viện. Nếu bạn không bị thuyết phục đủ, hãy chơi với thư viện này một thời gian và bạn chắc chắn sẽ yêu nó.

pdf-lib

Không giống như gói PDFJS trước đó, PDF-LIB chủ yếu được sử dụng để tạo và thao tác PDF. Bạn có thể tạo một tài liệu PDF mới một cách linh hoạt với gói này theo nhu cầu của bạn.

Gói này có hỗ trợ mạnh mẽ để sửa đổi một tài liệu hiện có. Bạn có thể thực hiện rất nhiều sửa đổi PDF với thư viện này. Ví dụ: bạn có thể thực hiện phân tách và hợp nhất PDF, và bạn có thể trích xuất một trang, chú thích một tài liệu PDF, thêm một phác thảo và nhiều thứ khác bạn có thể tưởng tượng.

Nó chỉ có JavaScript như một sự phụ thuộc. Vì vậy, nó có thể chạy trên bất kỳ thiết bị nào có thời gian chạy JavaScript. Trình duyệt, NodeJS, Deno và React Native được hỗ trợ tốt. Nếu bạn có thể quản lý để cài đặt JavaScript trên một thiết bị, thì thư viện này sẽ hoạt động chắc chắn.

Hạn chế chính của PDF-LIB là nó không có hỗ trợ kết xuất mạnh mẽ. Nếu bạn muốn tạo một giao diện người dùng tốt để xem PDF với thư viện này, thì PDF-LIB không phải là lựa chọn phù hợp cho bạn. Trong kịch bản này, bạn nên sử dụng pdfjs thay thế.

PDFJS #2

Nếu bạn đang nghĩ rằng tôi đang lặp lại chính mình, thì tôi thì không. Đây là một thư viện JavaScript để tạo tài liệu PDF. Nó có một API rất đơn giản để làm việc với.

Thư viện PDFJ trước đây mà chúng tôi đã thảo luận có hỗ trợ kết xuất rất mạnh trong UI nhưng nó thiếu các tính năng tạo và sửa đổi PDF.

Nhưng thư viện này được xây dựng với sự sáng tạo của PDF trong tâm trí. Nó có một API rất đơn giản và thân thiện với người mới bắt đầu. Bạn có thể so sánh nó với gói pdf-lib.

Hạn chế chính của thư viện PDFJ này là sự hỗ trợ sửa đổi các tài liệu hiện tại vẫn còn trong giai đoạn beta. Nó không hoạt động mọi lúc và vẫn đang được tiến hành.

Nếu trọng tâm chính của bạn là sửa đổi PDF (ví dụ: trích xuất trang, hợp nhất, chia tách, chú thích, v.v.) thì thư viện này có thể không hoạt động cho bạn.

Nếu những người đóng góp có thể làm cho tính năng sửa đổi hoạt động, thì đây có thể là gói PDF tốt nhất cho JavaScript.

js-pdf

Không giống như tất cả các gói PDF được liệt kê ở trên, thư viện này là một con thú hoàn chỉnh. Bạn có thể thực hiện bất kỳ công việc liên quan đến PDF với thư viện này. Đây giống như một jack của tất cả các thư viện giao dịch. Nếu bạn muốn một số công cụ liên quan đến PDF tinh vi, thì thư viện này có thể làm điều đó.

Nhưng có những gói tốt hơn trong JavaScript rất tốt cho các nhiệm vụ riêng lẻ. Ví dụ, PDFJ là trình kết xuất PDF tốt hơn JS-PDF và PDF-LIB có hỗ trợ sửa đổi tốt hơn so với JS-PDF.

Ở đây tôi không nói về hiệu suất thực tế hoặc các loại số liệu khác, tôi đang nói về kinh nghiệm của nhà phát triển. Tôi thấy rằng API của nó không trực quan lắm. Đối với một người mới bắt đầu, nó có thể được áp đảo ngay từ cái nhìn đầu tiên. Đây là ý kiến ​​của tôi, mặc dù, và những gì tôi đã trải nghiệm khi tôi sử dụng nó.

Thế hệ PDF là sức mạnh chính của thư viện này. Bạn có thể tạo bất kỳ loại PDF nào với bất kỳ thiết kế nào bạn có. Gói này sẽ làm tất cả các công việc nặng nhọc cho bạn. Nếu bạn có kinh nghiệm, thì đây có thể là đặt cược tốt nhất cho bạn.

React-PDF

Như tên cho thấy, thư viện này chuyên về hệ sinh thái phản ứng. Việc sử dụng là rất phản ứng. Bạn có thể dễ dàng tạo một tài liệu với cú pháp giống JSX của nó.

Bạn có thể tạo và hiển thị một tài liệu PDF với các thành phần React đơn giản. Nhưng các tính năng rất hạn chế. Thư viện này chủ yếu cho thế hệ PDF.

Nếu mục tiêu của bạn là hiển thị PDF cho người dùng, thì bạn có thể sử dụng gói này. Là một người yêu phản ứng, bạn sẽ thích thư viện này. Kiểm tra sân chơi của họ và dành một chút thời gian với gói này. Bằng cách này, bạn sẽ biết nếu bạn cần thư viện này hay không.

Tại sao chúng ta sẽ sử dụng pdf-lib trong hướng dẫn này

Trong số tất cả các thư viện PDF được đề cập ở trên, tôi sẽ sử dụng PDF-LIB cho bài viết này. Khi chúng tôi sẽ chia và hợp nhất các trang PDF và cũng khiến chúng trong trình duyệt, PDF-Lib dường như là lựa chọn tốt nhất cho bối cảnh này.

Ngoài ra, PDF-LIB có API khá đơn giản để làm việc và tất cả các API này đều được ghi lại. Nếu bạn đang sử dụng TypeScript, bạn cũng có thể nhận được suy luận loại, điều này rất hữu ích.

Cuối cùng nhưng không kém phần quan trọng, ví dụ của họ rất tốt. Bạn có thể đứng dậy và chạy trong vài phút. Vì vậy, tôi thích thư viện này cho các trường hợp sử dụng của tôi.

Cách đọc tệp PDF cục bộ trong JavaScript

Trước khi thực hiện bất kỳ hoạt động nào trên tài liệu PDF của chúng tôi, chúng tôi phải lấy tài liệu từ người dùng. Đọc bất kỳ tệp nào trong trình duyệt có thể được xử lý bằng API web

Đầu tiên, chúng tôi sẽ thực hiện và tệp đầu vào và sau đó xử lý tệp được tải lên bằng API web

Khi API Filereader hoạt động với các cuộc gọi lại, tôi thấy Async/chờ đợi sạch hơn rất nhiều và dễ làm việc hơn. Vì vậy, hãy làm cho một chức năng trợ giúp để sửa đổi các cuộc gọi lại của Filereader thành Async/Await.

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

Bây giờ khi người dùng tải lên một tệp bằng đầu vào tệp trước đó, chúng tôi nghe sự kiện đầu vào tệp và sau đó đọc tệp bằng hàm

Việc thực hiện logic này trông giống như trong mã:

const onFileSelected = async (e) => {
    const fileList = e.target.files;
    if (fileList?.length > 0) {
      const pdfArrayBuffer = await readFileAsync(fileList[0]);
    }
  };

Cho đến thời điểm này, PDF của chúng tôi được tải lên và chuyển đổi thành JavaScript

Tạo ra một mảng các số tự nhiên không khó trong JavaScript. Vì vậy, chúng tôi tạo một hàm có tên

Chúng tôi phải cung cấp số trang bắt đầu và số trang cuối và sau đó hàm

function range(start, end) {
	let length = end - start + 1;
	return Array.from({ length }, (_, i) => start + i - 1);
}

Ở đây chúng tôi thêm -1 vào cuối. Bạn có biết lý do không? Có -trong lập trình, các chỉ mục bắt đầu từ 0, không phải 1. Vì vậy, chúng tôi phải khấu trừ -1 từ mỗi số trang để có được hành vi chúng tôi muốn.

Bây giờ chúng ta hãy bắt đầu phần chính của bài viết này: trích xuất. Trước khi thực hiện bất kỳ công việc nào, hãy nhập thư viện PDF-Lib.

import { PDFDocument } from "pdf-lib";

Lúc đầu, chúng tôi tải PDF

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

Bây giờ chúng ta sẽ tạo một tệp PDF mới. Tất cả các trang PDF được trích xuất từ ​​tài liệu do người dùng cung cấp được hợp nhất trong tài liệu mới. Chúng tôi sử dụng hàm

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

Sau đó, chúng tôi sao chép các trang mong muốn của mình từ

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

Để lưu các thay đổi, hãy chạy

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

async function extractPdfPage(arrayBuff) {
    const pdfSrcDoc = await PDFDocument.load(arrayBuff);
    const pdfNewDoc = await PDFDocument.create();
    const pages = await pdfNewDoc.copyPages(pdfSrcDoc,range(2,3));
    pages.forEach(page=>pdfNewDoc.addPage(page));
    const newpdf= await pdfNewDoc.save();
    return newpdf;
  }

Chúng tôi đang trả lại một

const onFileSelected = async (e) => {
    const fileList = e.target.files;
    if (fileList?.length > 0) {
      const pdfArrayBuffer = await readFileAsync(fileList[0]);
    }
  };

function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

Cách hiển thị PDF trong trình duyệt

Đến bây giờ, chúng tôi có một

const onFileSelected = async (e) => {
    const fileList = e.target.files;
    if (fileList?.length > 0) {
      const pdfArrayBuffer = await readFileAsync(fileList[0]);
    }
  };

Sau đó, chúng tôi sẽ tạo một URL từ nó và kết xuất nó bên trong một iframe.

Bạn cũng có thể tạo Trình xem PDF tùy chỉnh của mình bằng thư viện PDFJS như tôi đã đề cập ở trên. Nhưng nếu bạn không cần thương hiệu và tùy chỉnh như vậy, trình xem PDF mặc định của trình duyệt vẫn ổn cho mục đích này.

function renderPdf(uint8array) {
    const tempblob = new Blob([uint8array], {
      type: "application/pdf",
    });
    const docUrl = URL.createObjectURL(tempblob);
    setPdfFileData(docUrl);
  }

Bây giờ bạn có thể dễ dàng hiển thị tài liệu này được trả về từ hàm

const onFileSelected = async (e) => {
    const fileList = e.target.files;
    if (fileList?.length > 0) {
      const pdfArrayBuffer = await readFileAsync(fileList[0]);
    }
  };

const onFileSelected = async (e) => {
    const fileList = e.target.files;
    if (fileList?.length > 0) {
      const pdfArrayBuffer = await readFileAsync(fileList[0]);
    }
  };

Hoàn thành ví dụ mã

Tôi đang sử dụng Next.js cho hướng dẫn này. Nếu bạn đang sử dụng một số khung JavaScript khác hoặc vani, kết quả sẽ tương tự nhau. Đây là tất cả các mã cho dự án này:

import { useState } from "react";
import { PDFDocument } from "pdf-lib";

export default function Home() {
  const [pdfFileData, setPdfFileData] = useState();

  function readFileAsync(file) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  }

  function renderPdf(uint8array) {
    const tempblob = new Blob([uint8array], {
      type: "application/pdf",
    });
    const docUrl = URL.createObjectURL(tempblob);
    setPdfFileData(docUrl);
  }

  function range(start, end) {
    let length = end - start + 1;
    return Array.from({ length }, (_, i) => start + i - 1);
  }

  async function extractPdfPage(arrayBuff) {
    const pdfSrcDoc = await PDFDocument.load(arrayBuff);
    const pdfNewDoc = await PDFDocument.create();
    const pages = await pdfNewDoc.copyPages(pdfSrcDoc, range(2, 3));
    pages.forEach((page) => pdfNewDoc.addPage(page));
    const newpdf = await pdfNewDoc.save();
    return newpdf;
  }

  // Execute when user select a file
  const onFileSelected = async (e) => {
    const fileList = e.target.files;
    if (fileList?.length > 0) {
      const pdfArrayBuffer = await readFileAsync(fileList[0]);
      const newPdfDoc = await extractPdfPage(pdfArrayBuffer);
      renderPdf(newPdfDoc);
    }
  };

  return (
    <>
      
Hello world
      
      
    
  );
}

Bây giờ bạn có thể lưu PDF kết quả bằng cách sử dụng nút tải xuống trên trình xem PDF.

Đi đâu từ đây

Trong bài viết này, tôi chỉ chạm vào đầu tảng băng. Nếu bạn muốn làm việc với PDF và muốn tạo ra một cái gì đó từ nó, thì PDF-LIB là một thư viện rất mạnh mẽ cho mục đích này.

Bạn có thể hợp nhất hai tệp PDF thành một, bạn có thể xoay các trang hoặc xóa một số trang khỏi tệp PDF. Đây chỉ là một số ví dụ - khả năng là vô tận.

Nếu bạn muốn triển khai ứng dụng tiếp theo của mình.

Làm một cái gì đó từ nó. Làm một số công cụ sáng tạo và cho tôi xem trên Twitter.

Sự kết luận

Nếu bạn đã đọc cho đến bây giờ, tôi rất biết ơn. Cảm giác như tôi đang tạo ra nội dung mà ai đó từ một nơi khác trên thế giới sẽ đọc. Chia sẻ với bạn bè mã hóa của bạn.

Bạn có muốn thêm một phác thảo vào tài liệu pdf của bạn không? Tôi biết đây là một nhiệm vụ rất khó để đạt được. Tôi đã trải qua rất nhiều nỗi đau để thêm tính năng này vào tài liệu PDF bằng JavaScript. Bạn có hứng thú không? & nbsp; đó là một câu chuyện cho tương lai.

Chúc bạn ngày mới tốt lành.