Convert Office to PDF using JavaScript

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

To convert Office files such as DOCX, XLSX, and PPTX to PDF, 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 guide.

Converting Office documents to PDFs after displaying

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

1. Load the source Office document (optional). If you want to load the document without showing the UI, use the headless parameter.
2. Make changes to the document (optional). For example, add annotations.
3. Convert the source document to PDF with exportPDF (optional). Use the outputFormat flag if you want a PDF/A output. For more information, refer to the converting PDF to PDF/A guide.
4. Save the output document. exportPDF returns a Promise that resolves to an ArrayBuffer with the output PDF. 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 an Office document and exports it to PDF:

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

The following example loads an Office document, exports it to PDF with conformance level PDF/A-4f, and downloads it in the client browser:

NutrientViewer.load({
  container: "#pspdfkit",
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY"
})
  .then((instance) =>
    instance.exportPDF({
      outputFormat: {
        conformance: NutrientViewer.Conformance.PDFA_4F
      }
    })
  )
  .then(function (buffer) {
    const blob = new Blob([buffer], { type: "application/pdf" });
    const objectUrl = window.URL.createObjectURL(blob);
    downloadPdf(objectUrl);
    window.URL.revokeObjectURL(objectUrl);
  });
function downloadPdf(blob) {
  const a = document.createElement("a");
  a.href = blob;
  a.style.display = "none";
  a.download = "output.pdf";
  a.setAttribute("download", "output.pdf");
  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 Office documents with custom fonts to PDFs after displaying

When you convert an Office document with custom fonts to PDF, 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 PDF to use the same fonts as the source document, provide paths to the custom font files.

To convert an Office document 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 Office document (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 PDF with exportPDF (optional). Use the outputFormat flag if you want a PDF/A output. For more information, refer to the converting PDF to PDF/A guide.
5. Save the output document. exportPDF returns a Promise that resolves to an ArrayBuffer with the output PDF. 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 an Office document and exports it to PDF:

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.docx",
  licenseKey: "YOUR_LICENSE_KEY"
}).then((instance) => {
  instance.exportPDF();
});

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 Office documents to PDFs without displaying

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

1. Load and convert the source Office document with convertToPDF.
   • Pass a Configuration object with the source document path and license key.
   • Optionally pass a Conformance enum value for PDF/A output.
2. Save the output document. convertToPDF returns a Promise that resolves to an ArrayBuffer with the output PDF. 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 PDF with conformance level PDF/A-4f:

NutrientViewer.convertToPDF(
  {
    document: "source.docx",
    licenseKey: "YOUR_LICENSE_KEY"
  },
  NutrientViewer.Conformance.PDFA_4F
);

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

NutrientViewer.convertToPDF({
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY"
}).then(function (buffer) {
  const blob = new Blob([buffer], { type: "application/pdf" });
  const objectUrl = window.URL.createObjectURL(blob);
  downloadPdf(objectUrl);
  window.URL.revokeObjectURL(objectUrl);
});
function downloadPdf(blob) {
  const a = document.createElement("a");
  a.href = blob;
  a.style.display = "none";
  a.download = "output.pdf";
  a.setAttribute("download", "output.pdf");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

Converting Office documents with custom fonts to PDFs without displaying

When you convert an Office document with custom fonts to PDF, 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 PDF to use the same fonts as the source document, provide paths to the custom font files.

To convert an Office document 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 Office document with convertToPDF.
   • Pass a Configuration object with the source document path, license key, and custom fonts.
   • Optionally pass a Conformance enum value for PDF/A output.
3. Save the output document. convertToPDF returns a Promise that resolves to an ArrayBuffer with the output PDF. 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 PDF with conformance level PDF/A-2a:

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.convertToPDF(
  {
    customFonts,
    document: "source.docx",
    licenseKey: "YOUR_LICENSE_KEY"
  },
  NutrientViewer.Conformance.PDFA_2A
);

Configuring conversion from Excel documents to PDF

Use these properties to configure Excel-to-PDF conversion:

• splitExcelSheetsIntoPages — Set to true to export each sheet as a separate PDF page. Default: false.
• spreadsheetRenderOnlyPrintArea — Set to true to render only each sheet’s defined print area. If no print area exists, the converter renders the full sheet. Default: true.
• spreadsheetMaximumContentHeightPerSheet — Sets the maximum content height (in millimeters) per sheet. Use this to manage memory usage. Default: 0 (unlimited).
• spreadsheetMaximumContentWidthPerSheet — Sets the maximum content width (in millimeters) per sheet. Use this to manage memory usage. Default: 0 (unlimited).

Example using NutrientViewer.convertToPDF()

NutrientViewer.convertToPDF({
  document: "source.xlsx",
  licenseKey: "YOUR_LICENSE_KEY",
}, null, {
  splitExcelSheetsIntoPages: true,
  spreadsheetRenderOnlyPrintArea: false,
  spreadsheetMaximumContentHeightPerSheet: 2000,
  spreadsheetMaximumContentWidthPerSheet: 200
});

Example using NutrientViewer.load()

NutrientViewer.load({
  document: "source.xlsx",
  licenseKey: "YOUR_LICENSE_KEY",
  officeConversionSettings: {
    splitExcelSheetsIntoPages: true,
    spreadsheetRenderOnlyPrintArea: false,
    spreadsheetMaximumContentHeightPerSheet: 2000,
    spreadsheetMaximumContentWidthPerSheet: 200
  }
});

Configuring conversion from Word documents to PDF

You can configure Word-to-PDF conversion by choosing how revision history is rendered.

• documentMarkupMode sets the markup mode:
  • noMarkup — Renders the document as if all changes were accepted. Comments aren’t converted to comment annotations. This is the default.
  • original — Renders the document as if all changes were rejected (as if there were no redlines). Comments aren’t converted to comment annotations.
  • simpleMarkup — Renders the document as if all changes were accepted. Comments are converted to comment annotations.
  • allMarkup — Renders the document with all markups. Redlines appear as redlines, and comments are converted to comment annotations.

Default value: noMarkup.

Example using NutrientViewer.convertToPDF()

NutrientViewer.convertToPDF({
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY",
}, null, {
  documentMarkupMode: 'simpleMarkup',
});

Example using NutrientViewer.load()

NutrientViewer.load({
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY",
  officeConversionSettings: {
    documentMarkupMode: 'simpleMarkup',
  }
});

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.convertToPDF({
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY",
  signal: controller.signal,
}).catch((error) => {
  if (error.name === "AbortError") {
    console.log("Conversion cancelled");
  }
});

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

Framework support

Office-to-PDF 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).