Convert Office to PDF Using JavaScript

PSPDFKit for Web is a client-side JavaScript library for converting Office documents to PDF directly in the browser, without the need for server-side processing. To convert Office documents such as DOCX, XLSX, and PPTX to PDF, PSPDFKit for Web relies entirely on its own technology built from the ground up, and it doesn’t depend on third-party tools such as LibreOffice or Microsoft Office. For more information on the supported Office formats, see the list of supported file types.

Launch Demo

Converting Office Documents to PDFs after Loading

To convert an Office document to a PDF after loading it in the PSPDFKit viewer, follow these steps.

  1. Load the source Office document. Optional: To load the document without a visual interface visible to the user, use the headless parameter.

  2. Optional: Make changes to the document. For example, add annotations.

  3. Convert the source document to a PDF with the exportPDF method. Optional: Use the outputFormat flag to create a PDF/A document. For more information, see converting PDF to PDF/A.

  4. Save the output document. The exportPDF method returns a Promise that resolves to an ArrayBuffer that contains the output PDF document. You can use the resulting ArrayBuffer to download or persist the output PDF in storage. For more information on downloading or persisting the exported ArrayBuffer, see the guides on saving a document.

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

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

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

PSPDFKit.load({
  container: "#pspdfkit",
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY"
})
  .then((instance) =>
    instance.exportPDF({
      outputFormat: {
        conformance: PSPDFKit.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 Loading

When you convert an Office document with custom fonts to a PDF, PSPDFKit for Web might not have access to these fonts due to licensing constraints. In this case, PSPDFKit replaces unavailable fonts with their equivalents — like Arial with Noto — by default. To make sure the output PDF uses the same fonts as the original Office document, provide the path to the custom font files to PSPDFKit.

To convert an Office document with custom fonts to a PDF after loading it in the PSPDFKit viewer, follow these steps:

  1. Load the custom fonts. For more information, see the guide on adding custom fonts.

  2. Load the source Office document. Optional: To load the document without a visual interface visible to the user, use the headless parameter.

  3. Optional: Make changes to the document. For example, add annotations.

  4. Convert the source document to a PDF with the exportPDF method. Optional: Use the outputFormat flag to create a PDF/A document. For more information, see converting PDF to PDF/A.

  5. Save the output document. The exportPDF method returns a Promise that resolves to an ArrayBuffer that contains the output PDF document. You can use the resulting ArrayBuffer to download or persist the output PDF in storage. For more information on downloading or persisting the exported ArrayBuffer, see the guides on saving a document.

The example below loads an Office document and exports it to a 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 PSPDFKit.Font({ name: font, callback: fetchFont })
);

PSPDFKit.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 Loading

To convert an Office document to a PDF without loading it in the PSPDFKit viewer, follow these steps.

  1. Load and convert the source Office document using the convertToPDF method. This method takes the following parameters:

    • A Configuration object that specifies the path to the source document and the license key.

    • Optional: A member of the Conformance enumeration that specifies the conformance level of the output PDF document. If you provide this parameter, the output is a PDF/A document.

  2. Save the output document. The convertToPDF method returns a Promise that resolves to an ArrayBuffer that contains the output PDF document. You can use the resulting ArrayBuffer to download or persist the output PDF in storage. For more information on downloading or persisting the exported ArrayBuffer, see the guides on saving a document.

The example below exports the loaded document to a PDF with conformance level PDF/A-4f:

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

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

PSPDFKit.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 Loading

When you convert an Office document with custom fonts to a PDF, PSPDFKit for Web might not have access to these fonts due to licensing constraints. In this case, PSPDFKit replaces unavailable fonts with their equivalents — like Arial with Noto — by default. To make sure the output PDF uses the same fonts as the original Office document, provide the path to the custom font files to PSPDFKit.

To convert an Office document with custom fonts to a PDF without loading it in the PSPDFKit viewer, follow these steps:

  1. Load the custom fonts. For more information, see the guide on adding custom fonts.

  2. Load and convert the source Office document using the convertToPDF method. This method takes the following parameters:

    • A Configuration object that specifies the path to the source document, the license key, and the custom fonts used in the document.

    • Optional: A member of the Conformance enumeration that specifies the conformance level of the output PDF document. If you provide this parameter, the output is a PDF/A document.

  3. Save the output document. The convertToPDF method returns a Promise that resolves to an ArrayBuffer that contains the output PDF document. You can use the resulting ArrayBuffer to download or persist the output PDF in storage. For more information on downloading or persisting the exported ArrayBuffer, see the guides on saving a document.

The example below exports the loaded document to a 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 PSPDFKit.Font({ name: font, callback: fetchFont })
);

PSPDFKit.convertToPDF(
  {
    customFonts,
    document: "source.docx",
    licenseKey: "YOUR_LICENSE_KEY"
  },
  PSPDFKit.Conformance.PDFA_2A
);

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.

Framework Support

The Office-to-PDF converter is compatible with any JavaScript framework, including React, Angular, Vue.js, Svelte, Blazor, Next.js, TypeScript, Nuxt.js, and jQuery. It’s also compatible with Electron, ASP.NET, HTML5, and Progressive Web Apps.

Integrations

PSPDFKit for Web is compatible with SharePoint, Microsoft Teams, Microsoft OneDrive, and Salesforce.

Dynamic Font Loading

PSPDFKit for Web introduces a powerful dynamic font loading mechanism that allows you to dynamically load fonts when users enter text containing characters not supported by available fonts. This feature ensures that text is correctly displayed, even when the user’s language and character set aren’t known in advance. This feature can improve the rendered result in a number of use cases:

  • Office-to-PDF conversions — Office documents frequently use fonts that aren’t available to the SDK. With dynamic font loading, PSPDFKit for Web can fetch the necessary fonts to render the document text with closer fidelity.

  • Text annotations — Text annotations can use non-standard fonts to render the text, a common use case which can now be automatically handled by making use of dynamically loaded fonts.

  • PDF forms — Similarly to text annotations, form fields may also use fonts that the SDK doesn’t include by default. When dynamic font loading is used, we can ensure those forms will be correctly rendered.

To leverage dynamic font loading, provide a list of fonts in a JSON file, which will be loaded on demand.

Default Fonts Bundle

To use this feature, we provide a default, ready-to-use dynamic fonts bundle.

To use it, extract the compressed file into a public folder accessible to your application, preferably in the same origin as the application so as to avoid CORS issues. Then, set the dynamicFonts property in the configuration object passed to PSPDFKit.load() to a URL pointing to the JSON file with the dynamic fonts data:

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

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

Do you want to create your own font bundle? Contact us on Support and we’ll help you!