diff --git a/README.md b/README.md index cdc2e1c..649073f 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,18 @@ 📃 [Documentation](https://pdfium.js.org/docs/intro) -Node.js wrapper for the PDFium library: +TypeScript/JavaScript wrapper for the PDFium library: - ⬇️ [pdfium](https://pdfium.googlesource.com/pdfium/) - source code of the PDFium library, developed by Google and used in Chrome. - ⬇️ [pdfium-lib](https://github.com/paulocoutinhox/pdfium-lib) - project to compile PDFium library to multiple platforms, including WebAssembly. - 📍 [@hyzyla/pdfium](https://github.com/hyzyla/pdfium) - (you are here) - Node.js wrapper for the WebAssembly build of PDFium library. + TypeScript/JavaScript wrapper for the WebAssembly build of PDFium library. # Features - 📦 Zero dependencies - PDFium library is compiled to WebAssembly and bundled with the package. - 🚀 Fast - PDFium can be faster than PDF.js, because it's originally written in C++ and compiled to WebAssembly, while PDF.js is entirely written in JavaScript. - 🔒 Type-safe - TypeScript definitions are included. +- 🗼 Works in browser and Node.js ## Installation diff --git a/demo/vite/src/demo.tsx b/demo/vite/src/demo.tsx index 444dce1..805cd03 100644 --- a/demo/vite/src/demo.tsx +++ b/demo/vite/src/demo.tsx @@ -1,4 +1,5 @@ -import { type PDFiumDocument, PDFiumLibrary } from "@hyzyla/pdfium/browser/cdn"; +import { type PDFiumDocument, PDFiumLibrary } from "@hyzyla/pdfium"; +import wasmUrl from "@hyzyla/pdfium/pdfium.wasm?url"; import { useQuery } from "@tanstack/react-query"; import { useEffect, useRef } from "react"; @@ -8,7 +9,9 @@ const useDocument = () => { queryFn: async () => { const response = await fetch("/sample.pdf"); const arrayBuffer = await response.arrayBuffer(); - const library = await PDFiumLibrary.init({}); + const library = await PDFiumLibrary.init({ + wasmUrl: wasmUrl, + }); const document = await library.loadDocument(new Uint8Array(arrayBuffer)); return document; }, diff --git a/docs/docs/01-intro.md b/docs/docs/01-intro.md index 969d6b7..2ea8f1c 100644 --- a/docs/docs/01-intro.md +++ b/docs/docs/01-intro.md @@ -1,24 +1,23 @@ # Introduction -@hyzyla/pdfium is a Node.js wrapper for the [PDFium](https://pdfium.googlesource.com/pdfium/) library: +@hyzyla/pdfium is a TypeScript/JavaScript wrapper for the [PDFium](https://pdfium.googlesource.com/pdfium/) library: - ⬇️ [pdfium](https://pdfium.googlesource.com/pdfium/) - an open-source library for PDF manipulation and rendering, developed by Google and used in Google Chrome browser. - ⬇️ [pdfium-lib](https://github.com/paulocoutinhox/pdfium-lib) - project by [Paulo Coutinho](https://github.com/paulocoutinhox) to compile PDFium library to multiple platforms, including WebAssembly. -- 📍 [@hyzyla/pdfium](https://github.com/hyzyla/pdfium) - (you are here) Node.js wrapper for the WebAssembly build of PDFium library. +- 📍 [@hyzyla/pdfium](https://github.com/hyzyla/pdfium) - (you are here) TypeScript/JavaScript wrapper for the WebAssembly build of PDFium library. # Features - 📦 **Zero dependencies** - PDFium library is compiled to WebAssembly and bundled with the package. -- 🚀 **Fast** - PDFium can be faster than [PDF.js](https://mozilla.github.io/pdf.js/), because it's - originally written in C++ and compiled to WebAssembly, while PDF.js is entirely written in JavaScript. - 🔒 **Type-safe** - TypeScript definitions are included. +- 🗼 **Works in browser and Node.js** # Use cases Main use case for this library is to render PDF files to images, but if you need to do something else with PDF files that is supported by PDFium, but not included in this library, feel free to open an issue or a pull request on [GitHub](https://github.com/hyzyla/pdfium). -Examples how to render PDF files to images can be found on 👉 ["Render PDF to image"](/docs/02-render-pdf.md) page. +Examples how to render PDF files to images can be found on 👉 ["Render PDF to image"](/docs/03-render-pdf.md) page. # Installation diff --git a/docs/docs/02-init-library.md b/docs/docs/02-init-library.md new file mode 100644 index 0000000..ff0308d --- /dev/null +++ b/docs/docs/02-init-library.md @@ -0,0 +1,62 @@ +# Initialize Library + +Before working with the package, you need to create an instance of PDFiumLibrary. You can do this once for the entire application and reuse the library instance throughout the application's lifetime. + + + +```typescript +import { PDFiumLibrary } from '@hyzyla/pdfium'; + +const library = await PDFiumLibrary.init(); + +// ... do something with the library + +library.destroy(); +``` + + +## Node.js + +For Node.js, there is no need to provide any additional settings to load the .wasm file; it will be automatically loaded from your `node_modules` folder. + +```typescript +import { PDFiumLibrary } from '@hyzyla/pdfium'; + +const library = await PDFiumLibrary.init(); +``` + +## Browser + +In the browser, you need to provide the URL to the `.wasm` binary or an `ArrayBuffer` of the `.wasm` binary as an argument to the init method. Typically, you will use a bundler like Webpack or Rollup, which allows you to import the `.wasm` file directly as an asset URL. Here is an example of how you can do this with Rollup: + +```typescript +import { PDFiumLibrary } from "@hyzyla/pdfium/browser/cdn"; +import wasmUrl from "@hyzyla/pdfium/pdfium.wasm?url"; // URL to the .wasm file + +const library = await PDFiumLibrary.init({ + wasmUrl: wasmUrl, +}); +``` + +:::info +This method is recommended for production use, as it allows you to load the .wasm file from your own servers without any additional overhead. +::: + +## Browser - quick setup + +If you need to quickly test the library in the browser, you can use special entry points that load the `.wasm` file from a CDN or from a base64-encoded string. This approach is not recommended for production use, as it may introduce additional overhead and security risks, but it can be useful for quick testing and prototyping. + +#### Load .wasm from CDN (security risk and slower loading): +```typescript +import { PDFiumLibrary } from "@hyzyla/pdfium/browser/cdn"; + +const library = await PDFiumLibrary.init(); +``` + +#### Load .wasm from base64 encoded string (bigger bundle size): +```typescript +import { PDFiumLibrary } from "@hyzyla/pdfium/browser/base64"; + +const library = await PDFiumLibrary.init(); +``` + diff --git a/docs/docs/02-render-pdf.md b/docs/docs/03-render-pdf.md similarity index 93% rename from docs/docs/02-render-pdf.md rename to docs/docs/03-render-pdf.md index b86874e..324aebf 100644 --- a/docs/docs/02-render-pdf.md +++ b/docs/docs/03-render-pdf.md @@ -1,18 +1,6 @@ # Render PDF to image -## Load PDFiumLibrary -First of all, you need to create an instance of PDFiumLibrary. You can do this once for the whole application and reuse the library instance during the application lifetime. - -```typescript -import { PDFiumLibrary } from '@hyzyla/pdfium'; - -const library = await PDFiumLibrary.init(); - -// ... do something with the library - -library.destroy(); -``` ## Load PDF document diff --git a/docs/docs/03-extract-images-from-page.md b/docs/docs/04-extract-images-from-page.md similarity index 100% rename from docs/docs/03-extract-images-from-page.md rename to docs/docs/04-extract-images-from-page.md