Handling non-Latin fonts, standard fonts, and JPEG 2000 in react-pdf

Some PDFs require additional resources to render correctly: character maps for CJK text, standard font data for older PDFs, and WebAssembly (WASM) decoders for JPEG 2000 images. react-pdf passes these through to PDF.js via the options prop.

CMap support (non-Latin characters)

PDFs with Chinese, Japanese, Korean, or other non-Latin characters need Character Map (CMap) files for correct text rendering.

Option A: Copy CMaps to public directory

Copy the CMap files from pdfjs-dist into your build output:

cp -r node_modules/pdfjs-dist/cmaps public/cmaps

Then configure:

const options = {
  cMapUrl: "/cmaps/",
  cMapPacked: true,
};

<Document file={file} options={options}>
  <Page pageNumber={1} />
</Document>

cMapPacked defaults to true in current PDF.js versions, but older versions defaulted to false. Setting it explicitly avoids surprises across upgrades.

Option B: Use CDN

Skip the copy step and load the CMap files directly from a CDN instead:

import { pdfjs } from "react-pdf";

const options = {
  cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
  cMapPacked: true,
};

Build tool integration

These bundlers support copy plugins:

Vite:

import { viteStaticCopy } from "vite-plugin-static-copy";

export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: "node_modules/pdfjs-dist/cmaps/*",
          dest: "cmaps",
        },
      ],
    }),
  ],
};

webpack (CopyPlugin):

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "node_modules/pdfjs-dist/cmaps", to: "cmaps" },
      ],
    }),
  ],
};

Standard fonts

Older or non-PDF/A PDFs may reference the 14 “standard fonts” (Helvetica, Times-Roman, Courier, etc.) by name instead of embedding them. PDF 2.0 (2017) requires fonts to be embedded, and PDF/A has required it since 2005 — but plenty of in-the-wild files still skip embedding. Without standardFontDataUrl, PDF.js can’t substitute and the text renders incorrectly.

Setup

Copy the standard fonts directory:

cp -r node_modules/pdfjs-dist/standard_fonts public/standard_fonts

Configure:

const options = {
  standardFontDataUrl: "/standard_fonts/",
};

<Document file={file} options={options} />

Or use CDN:

const options = {
  standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts/`,
};

JPEG 2000 support (WASM)

Some PDFs use JPEG 2000 compression for images. PDF.js can decode these using a WebAssembly module.

Setup

Copy the WASM files:

cp -r node_modules/pdfjs-dist/wasm public/wasm

Configure:

const options = {
  wasmUrl: "/wasm/",
};

<Document file={file} options={options} />

Combined configuration

A production setup typically includes all three:

import { pdfjs } from "react-pdf";

// Define outside component to avoid re-creation.
const options = {
  cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
  standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts/`,
  wasmUrl: "/wasm/",
};

function PDFViewer({ file }) {
  return (
    <Document file={file} options={options}>
      <Page pageNumber={1} />
    </Document>
  );
}

Custom HTTP headers

For authenticated PDF endpoints, pass headers via options:

const options = useMemo(
  () => ({
    httpHeaders: {
      Authorization: `Bearer ${token}`,
    },
    withCredentials: true,
  }),
  [token],
);

<Document file={{ url: protectedUrl }} options={options} />

When do you need these?

Most modern PDFs embed everything they need. You can start without these and add them when you encounter rendering issues.

Key points

• All special resource paths go through the options prop on Document.
• CDN paths are the easiest setup — no build tool configuration needed.
• For production, self-host the files for reliability and CSP compliance.
• Memoize the options object to avoid unnecessary rerenders.
• httpHeaders and withCredentials also go in options.
• Most PDFs work without any of these — add them when you see rendering issues.

How Nutrient Web SDK handles this

All the CMap configuration, standard font paths, WASM decoder setup, and build tool plugins shown above are unnecessary with Nutrient Web SDK:

// No CMap files, no standard fonts, no WASM decoder, no HTTP headers config.
const instance = await NutrientViewer.load({
  container: "#pdf-container",
  document: "document.pdf",
  // CJK fonts, standard fonts, JPEG 2000 — all handled internally.
});

You don’t need cMapUrl, standardFontDataUrl, or wasmUrl in options, and no Vite/webpack copy plugins are required. Nutrient bundles all font rendering, CMap support, and image decoders internally. CJK text, legacy PDFs, and JPEG 2000 images render correctly out of the box — in any framework, with zero configuration.

Learn more about Nutrient Web SDK | Migration guide | Contact Sales

FAQ