Add PDF functionality with TypeScript

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient into your project. By the end, you'll be able to render a PDF document in the UI.

Test without installing You can test the SDK capabilities in our playground.

Jump to example Prefer to jump straight to code? View the example repo on GitHub.

Installation

Add the Nutrient dependency:
- npm
- pnpm
- yarn
Terminal window
npm i @nutrient-sdk/viewer
Terminal window
pnpm add @nutrient-sdk/viewer
Terminal window
yarn add @nutrient-sdk/viewer

Run the following command to install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:

npm i -D webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin cross-env copy-webpack-plugin clean-webpack-plugin

mkdir config && touch config/webpack.js

In the config folder, add the following code to the webpack.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const filesToCopy = [
  // Nutrient files.
  {
    from: './node_modules/nutrient-sdk/viewer/dist',
    to: './nutrient-lib',
  },
  // Application CSS.
  {
    from: './src/index.css',
    to: './index.css',
  },
  // Example PDF.
  {
    from: './assets/document.pdf',
    to: './document.pdf',
  },
];

/**
* webpack main configuration object.
*/
const config = {
  entry: path.resolve(__dirname, '../src/index.ts'),
  mode: 'development',
  devtool: 'inline-source-map',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      // All files with a `.ts` or `.tsx` extension will be handled by `ts-loader`.
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),

    // Copy the WASM/ASM and CSS files to the `output.path`.
    new CopyWebpackPlugin({ patterns: filesToCopy }),
  ],

  optimization: {
    splitChunks: {
      cacheGroups: {
        // Creates a `vendor.js` bundle that contains external libraries (including `pspdfkit.js`).
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          priority: 10,
          enforce: true,
        },
      },
    },
  },
};

module.exports = config;

Render a PDF

Rename the PDF document you want to display in your application to document.pdf, and place it in the assets directory. You can use this demo document as an example.

In the src folder, create an index.html file with the following content. This adds an empty <div> element where PSPDFKit is loaded:

<!DOCTYPE html>
<html>
  <head>
    <title>Nutrient for Web — TypeScript example</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

In the src folder, create an index.css file with the following content. This declares the height of the PSPDFKit element:
```
.container {
  height: 100vh;
}
```

In the src folder, create an index.ts file with the following content:

import NutrientViewer from '@nutrient-sdk/viewer';

function load(document: string) {
  console.log(`Loading ${document}...`);
  NutrientViewer.load({
    document,
    container: '.container',
  })
    .then((instance) => {
      console.log('Nutrient loaded', instance);
    })
    .catch(console.error);
}

load('document.pdf'); // Pass your PDF file.

You should see the PDF rendered in the UI when you serve the project locally.

Troubleshooting

Example View the example repo on GitHub.

Facing issues? Visit the troubleshooting guide for solutions to some common errors.