Convert PDF to Office using JavaScript

Nutrient Web SDK is a client-side JavaScript library . It converts PDFs to Office documents directly in the browser and doesn’t require server-side processing.

For server-side PDF-to-Office conversion details, refer to the convert PDF to Office guide.
To convert PDFs to Office documents such as DOCX, XLSX, and PPTX, Nutrient Web SDK uses its own conversion engine. It doesn’t depend on third-party tools such as LibreOffice or Microsoft Office. For supported Office formats, refer to the list of supported file types.

Converting PDFs to Office documents after displaying

To convert a PDF to an Office document after loading it in the viewer:

1. Load the source PDF (optional). If you want to load the document without showing the UI, use the headless parameter.
2. Make changes to the PDF (optional). For example, add annotations.
3. Convert the source PDF to an Office document with exportOffice. Set format to .docx, .xlsx, or .pptx.
4. Save the output document. exportOffice returns a Promise that resolves to an ArrayBuffer with the output Office document. Use that buffer to download the file or store it. For more information, refer to the guides on saving a document.

The following example loads a PDF and exports it to an Office document in DOCX format:

NutrientViewer.load({
  container: "#pspdfkit",
  document: "source.pdf",
  licenseKey: "YOUR_LICENSE_KEY"
}).then((instance) => {
  instance.exportOffice({ format: 'docx' });
});

The following example loads a PDF, exports it to an Office document in DOCX format, and downloads it in the client browser:

NutrientViewer.load({
  container: "#pspdfkit",
  document: "source.pdf",
  licenseKey: "YOUR_LICENSE_KEY"
})
  .then((instance) =>
    instance.exportOffice({
      format: 'docx'
    })
  )
  .then(function (buffer) {
    const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
    const objectUrl = window.URL.createObjectURL(blob);
    downloadDocument(objectUrl);
    window.URL.revokeObjectURL(objectUrl);
  });

function downloadDocument(blob) {
  const a = document.createElement("a");
  a.href = blob;
  a.style.display = "none";
  a.download = "output.docx";
  a.setAttribute("download", "output.docx");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

When exporting a document, you have several options. Refer to our guides on flattening annotations and incremental saving for more details.

Auto saving can be configured for different scenarios and use cases. You can find more information in our auto save guide.

Converting PDFs with custom fonts to Office documents after displaying

When you convert a PDF with custom fonts to an Office document, Nutrient Web SDK can’t access those fonts by default because of licensing constraints. In that case, it substitutes missing fonts with equivalents (for example, Arial with Noto).

If you want the output Office document to use the same fonts as the source PDF, provide paths to the custom font files.

To convert a PDF with custom fonts after loading it in the viewer:

1. Load custom fonts. For more information, refer to the adding custom fonts guide.
2. Load the source PDF (optional). If you want to load the document without showing the UI, use the headless parameter.
3. Make changes to the document (optional). For example, add annotations.
4. Convert the source document to an Office document with exportOffice. Set format to .docx, .xlsx, or .pptx.
5. Save the output document. exportOffice returns a Promise that resolves to an ArrayBuffer with the output Office document. Use that buffer to download the file or store it. For more information, refer to the guides on saving a document.

The following example loads a PDF and exports it to an Office document:

const fetchFont = (fontFileName) =>
  fetch(`https://example.com/${fontFileName}`).then((r) => {
    if (r.status === 200) {
      return r.blob();
    } else {
      throw new Error();
    }
  });

const customFonts = ["arial.ttf", "helvetica.ttf", "tahoma.ttf"].map(
  (font) => new NutrientViewer.Font({ name: font, callback: fetchFont })
);

NutrientViewer.load({
  customFonts,
  container: "#pspdfkit",
  document: "source.pdf",
  licenseKey: "YOUR_LICENSE_KEY"
}).then((instance) => {
  instance.exportOffice({ format: 'docx' });
});

When exporting a document, you have several options. Refer to our guides on flattening annotations and incremental saving for more details.

Auto saving can be configured for different scenarios and use cases. You can find more information in our auto save guide.

Converting PDFs to Office documents without displaying

To convert a PDF to an Office document without loading it in the viewer:

1. Load and convert the source PDF with convertToOffice.
   • Pass a Configuration object with the source document path and license key.
   • Pass one supported Office output format: .docx, .xlsx, or .pptx.
2. Save the output document. convertToOffice returns a Promise that resolves to an ArrayBuffer with the output Office document. Use that buffer to download the file or store it. For more information, refer to the guides on saving a document.

The following example exports the source document to an Office document in DOCX format:

NutrientViewer.convertToOffice(
  {
    document: "source.pdf",
    licenseKey: "YOUR_LICENSE_KEY"
  },
  'docx'
  );

The following example converts a PDF to an Office document and downloads it in the client browser:

NutrientViewer.convertToPDF({
  document: "source.pdf",
  licenseKey: "YOUR_LICENSE_KEY"
}).then(function (buffer) {
  const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
  const objectUrl = window.URL.createObjectURL(blob);
  downloadDocument(objectUrl);
  window.URL.revokeObjectURL(objectUrl);
});

function downloadDocument(blob) {
  const a = document.createElement("a");
  a.href = blob;
  a.style.display = "none";
  a.download = "output.docx";
  a.setAttribute("download", "output.docx");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

Converting PDFs with custom fonts to Office documents without displaying

When you convert a PDF with custom fonts to an Office document, Nutrient Web SDK can’t access those fonts by default because of licensing constraints. In that case, it substitutes missing fonts with equivalents (for example, Arial with Noto).

If you want the output Office document to use the same fonts as the source PDF, provide paths to the custom font files.

To convert a PDF with custom fonts without loading it in the viewer:

1. Load custom fonts. For more information, refer to the adding custom fonts guide.
2. Load and convert the source PDF with convertToOffice.
   • Pass a Configuration object with the source document path, license key, and custom fonts.
   • Pass the output Office format: .docx, .xlsx, or .pptx.
3. Save the output document. convertToOffice returns a Promise that resolves to an ArrayBuffer with the output Office document. Use that buffer to download the file or store it. For more information, refer to the guides on saving a document.

The following example exports the source document to an Office document in DOCX format:

const fetchFont = (fontFileName) =>
  fetch(`https://example.com/${fontFileName}`).then((r) => {
    if (r.status === 200) {
      return r.blob();
    } else {
      throw new Error();
    }
  });

const customFonts = ["arial.ttf", "helvetica.ttf", "tahoma.ttf"].map(
  (font) => new NutrientViewer.Font({ name: font, callback: fetchFont })
);

NutrientViewer.convertToOffice(
  {
    customFonts,
    document: "source.pdf",
    licenseKey: "YOUR_LICENSE_KEY"
  },
  'docx'
);

When exporting a document, you have several options. Refer to our guides on flattening annotations and incremental saving for more details.

Auto saving can be configured for different scenarios and use cases. You can find more information in our auto save guide.

Canceling a conversion

To cancel a conversion in progress, pass an AbortSignal(opens in a new tab) through the signal configuration option:

const controller = new AbortController();

NutrientViewer.convertToOffice(
  {
    document: "source.pdf",
    licenseKey: "YOUR_LICENSE_KEY",
    signal: controller.signal,
  },
  "docx"
).catch((error) => {
  if (error.name === "AbortError") {
    console.log("Conversion cancelled");
  }
});

// Cancel the conversion.
controller.abort();

Framework support

PDF-to-Office conversion is compatible with any JavaScript framework supported by Nutrient Web SDK, including:

• React
• Angular
• Vue.js
• Svelte
• Blazor
• Next.js
• TypeScript
• Nuxt.js
• jQuery

It’s also compatible with Electron, ASP.NET, HTML5, and progressive web apps.

Dynamic font loading

Nutrient Web SDK introduces a dynamic font loading mechanism that can load fonts when a PDF or user input references characters not supported by currently available fonts. This feature helps ensure text is correctly displayed, even when the user’s language and character set aren’t known in advance.

When dynamic fonts are used

Dynamic fonts are currently used in the following scenarios:

• Office-to-PDF or PDF-to-Office conversions — Office or PDF documents frequently use fonts that aren’t available to the SDK. With dynamic font loading, Nutrient Web SDK can fetch the necessary fonts to render the document text with closer fidelity.
• PDF page rendering — When a PDF references non-embedded fonts, the SDK can fetch matching fonts so the page renders with the intended typefaces.
• Text annotations — When users type text annotations using non-standard fonts, dynamic fonts are loaded to render the characters correctly.
• PDF forms — When users fill in form fields that use fonts not included by default in the SDK, dynamic fonts ensure the text is properly rendered.

If you configure font substitutions, dynamic font loading applies those rules when resolving missing fonts. Font substitution during page rendering is available starting with Nutrient Web SDK 1.13.0.

The dynamic font loading process works as follows: When the SDK needs to render text and doesn’t have the required font, it requests and downloads that font and then renders the content.

How dynamic fonts differ from custom fonts

• Custom fonts are downloaded before the viewer starts rendering. They’re used everywhere the viewer uses fonts throughout the document.
• Dynamic fonts are only downloaded when the SDK needs them, avoiding upfront loading time.

Default fonts bundle

To use this feature, we provide a default, ready-to-use dynamic fonts bundle. Follow the steps below to use it.

• Extract the compressed file into a public folder accessible to your application, preferably in the same folder as the application to avoid CORS issues.
• Set the dynamicFonts property in the configuration object passed to NutrientViewer.load() to a URL pointing to the JSON file with the dynamic fonts data, as shown below:

NutrientViewer.load({
  ...configuration,
  dynamicFonts: "https://example.com/path/to/fonts.json"
});

The fonts.json file contains the information necessary for Nutrient Web SDK to download and make use of the fonts included in the bundle when needed.

Creating your own font bundle

You can create your own dynamic font bundle using the nutrient-font-tool CLI:

npx @nutrient-sdk/font-tool create ./my-fonts

This generates a fonts.json file in your font directory. The tool recursively scans for .ttf, .otf, .ttc, and .otc files and extracts the metadata needed by Nutrient Web SDK.

For more options, see the nutrient-font-tool repository(opens in a new tab).