UnoPDF

Appearance

Create Document - React ​

In this example we show how you can specify a list of operations to the CreateDocument function. In the example a user can enter a line of text. When they press the create button a new document with that text is created.

This shows the CreateDocument call:

ts
const pdfInfo = await _app.createDocument(null, [
  {
    // create a blank page
    operation: "create-page",
    data: {
      orientation: "landscape",
      size: "a4",
    },
  },
  {
    // add single line text
    operation: "add-single-line-text",
    data: {
      index: 0,
      text: "The user entered:",
      fontsize: "12pt",
      fontfamily: "Helvetica",
      translate: [72, 540],
    },
  },
  {
    // add single line text
    operation: "add-single-line-text",
    data: {
      index: 0,
      text: line,
      fontsize: "48pt",
      fontfamily: "Helvetica-Bold",
      translate: [72, 480],
    },
  },
]);

Screenshot ​

Screenshot op create-document

Code ​

tsx
import {
  PdfApplication,
  PdfDocument,
  PdfPages,
  defineCustomElements,
} from "@tallcomponents/unopdf-react";

import { useRef, useState } from "react";

defineCustomElements();

// Note: this example uses Vite and retrieves the keys from the environment.
// This should not be used in production.
// See the authentication section in the usage guide for more information.

const publickey = import.meta.env.VITE_PUBLIC_KEY;
const privatekey = import.meta.env.VITE_PRIVATE_KEY;

function App() {
  const pdfApplication = useRef<HTMLPdfApplicationElement>(null);
  const pdfDocument = useRef<HTMLPdfDocumentElement>(null);
  const [line, setLine] = useState("");

  const create = async () => {
    const _app = pdfApplication.current as HTMLPdfApplicationElement;
    // #region create_document
    const pdfInfo = await _app.createDocument(null, [
      {
        // create a blank page
        operation: "create-page",
        data: {
          orientation: "landscape",
          size: "a4",
        },
      },
      {
        // add single line text
        operation: "add-single-line-text",
        data: {
          index: 0,
          text: "The user entered:",
          fontsize: "12pt",
          fontfamily: "Helvetica",
          translate: [72, 540],
        },
      },
      {
        // add single line text
        operation: "add-single-line-text",
        data: {
          index: 0,
          text: line,
          fontsize: "48pt",
          fontfamily: "Helvetica-Bold",
          translate: [72, 480],
        },
      },
    ]);
    // #endregion create_document

    const _pdf = pdfDocument.current;
    if (pdfInfo?.id) {
      _pdf?.open(pdfInfo.id);
    }
  };

  return (
    <>
      <h1>UnoPdf Example: Adding Text in React</h1>

      <PdfApplication
        ref={pdfApplication}
        publickey={publickey}
        privatekey={privatekey}
      />

      <PdfDocument ref={pdfDocument} />
      <div style={{ display: "flex" }}>
        <div style={{ padding: "10px" }}>
          <input
            value={line}
            onChange={(event) => setLine(event.target.value)}
            type="text"
            placeholder="Type line here"
          />
          <button type="button" onClick={create}>
            Create
          </button>
        </div>
        <div>
          <PdfPages />
        </div>
      </div>
    </>
  );
}

export default App;

Running the example ​

  • Download the react - Create Document project
  • Unzip the file to a directory react-create-document.
    shell
    unzip react-create-document.zip -d react-create-document
  • Open a terminal and go to that directory
    shell
    cd react-create-document
  • Install dependencies
    shell
    npm install
    shell
    yarn
  • Start the project
    shell
    npm run start
    shell
    yarn start