Onedoc

In this section we will show you how can you generate and host a .pdf using Onedoc’s SDK.

​

Prerequisites

To get the most out of this guide, you’ll need to:

• Sign-up/in to Onedoc
• Generate your API Key

​

1. Installation

If you did not have set up a NodeJS project, you can use the following command to do so:

npm init -y

Get the Onedoc Node.js SDK

npm install @onedoc/client

​

2. Create a document template

Create a components directory using the following command:

mkdir components

Then create your document template on components/pdf-template.jsx.
Your file must export a React component.

import * as React from "react";

export const PDFTemplate = ({ name }) => {
  return (
    <div>
      <h1> Hello {name} !</h1>
    </div>
  );
};

and optionally, a stylesheet named stylesheet.css, in the root directory:

body {
  background-color: lightblue;
}

​

3. Generate your PDF

Create a new file generate.tsx', import the React document template and generate a PDF using your ONEDOC_API_KEY` and your main React component.

import React from "react";
import { PDFTemplate } from "./components/pdf-template";
import { Onedoc } from "@onedoc/client";
import { readFileSync, writeFileSync } from "fs";
import { compile } from "@onedoc/react-print";
import { join } from "path";

const ONEDOC_API_KEY = "####-####-####-####"; // replace with your api key

(async () => {
  const onedoc = new Onedoc(ONEDOC_API_KEY);

  let doc = {
    html: await compile(<PDFTemplate name="Bruce Wayne" />),
    title: "Hello",
    test: true, // if true, produce a PDF in test mode with a Onedoc's watermark
    save: true, // if true, host the document and provide a download link in the console and your Onedoc's dashboard
    expiresIn: 30, // the number of day you want to host your document
    assets: [
      {
        path: "./stylesheet.css",
        content: readFileSync(join(process.cwd(), "stylesheet.css")).toString(),
      },
    ],
  };

  const { file, link, error, info } = await onedoc.render(doc);

  if (error) {
    throw error;
  }

  console.log(link);
})();

You are almost done ! Run the script using the following command :

npx tsx ./generate.tsx

Stylesheets and other referenced assets should be passed in the asset parameter. If you are using a framework such as Tailwind, you must submit a compiled stylesheet that can be applied to a HTML file that contains the compiled React component.

You must upload the content of your asset in string or Buffer format in the content field.

​

4. Congratulations !

You just created your first PDF using Onedoc Node.js + React SDK. You can now access your private dashboard to preview and download your PDF.