Convert DOCX to PDF in JavaScript: A step‑by‑step guide

Client-side Word-to-PDF conversion

To convert Office documents such as DOC or DOCX files to PDF, Nutrient Web SDK relies entirely on its own technology built from the ground up, and it doesn’t depend on third-party tools such as Microsoft Office. With Nutrient Web SDK, Word documents can be converted into PDF headlessly without a visual interface, or automatically as the document is loaded in the viewer.

• Easily integrate client-side Word-to-PDF conversion in your app or workflow.
• Open Word files in the viewer or convert directly in your workflow.
• No MS interop or license required.
• Doesn’t rely on third-party tools like LibreOffice.
• We work directly with you to refine and improve conversion results.

For both manual and npm installations, it’s important to note that the assets must be copied to a public folder. Make sure your server has the Content-Type: application/wasm MIME type set, as explained in our troubleshooting guide.

To serve the files, you need to use an npm package like serve(opens in a new tab) as a simple HTTP server.

Unlocking more capabilities with our Word viewer

By combining client-side Word-to-PDF conversion with our standalone viewer, you unlock all the document processing capabilities available with Nutrient Web SDK. Users can now view, collaborate on, edit, and sign Office files directly in the web browser.

• Text editing — Edit text directly in the displayed Word document.
• Page manipulation — Organize documents by adding, removing, or rearranging pages.
• Annotations — Boost collaboration by adding text highlights, comments, or stamps.
• Adding signatures — Draw, type, or upload a signature directly to a Word document.

Requirements to get started

To get started, you’ll need:

• The latest stable version of Node.js(opens in a new tab).
• A package manager compatible with npm(opens in a new tab). This guide contains usage examples for the npm client(opens in a new tab) (installed with Node.js by default).

Adding Nutrient to your project

1. Install the @nutrient-sdk/viewer package via npm:

   • npm
   • pnpm
   • yarn
   npm

   npm i @nutrient-sdk/viewer

2. Copy the required viewer artifacts to your assets directory:

   cp -R ./node_modules/@nutrient-sdk/viewer/dist/ ./assets/

Make sure the assets directory contains:

• nutrient-viewer.js (or an equivalent main script)
• A nutrient-viewer-lib/ directory with supporting library files

Integrating into your project

1. Add the DOC or DOCX document you want to display to your project’s directory. You can use our demo document as an example.

2. Add a mounting <div> and a script reference to your HTML:

   <div id="nutrient" style="width: 100%; height: 100vh;"></div>
   <script type="module" src="index.js"></script>

3. Create index.js file and import the viewer in your JavaScript entry file:

   import "./assets/nutrient-viewer.js";

4. Initialize the viewer using NutrientViewer.load():

   const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
   
   NutrientViewer.load({
     baseUrl,
     container: "#nutrient",
     document: "document.docx",
   })
     .then((instance) => {
       console.log("Nutrient loaded", instance);
     })
     .catch((error) => {
       console.error(error.message);
     });

   This method takes a configuration object as its parameter. The configuration object specifies the location of the document on the page, the path to the source document, and the optional license key:

   This code will load document.docx into the element with the ID nutrient.

5. Convert the source document to a PDF with the exportPDF method:

   <script>
     NutrientViewer.load({
       baseUrl,
       container: "#nutrient",
       document: "document.docx", // Add the path to your document here.
     })
       .then(function (instance) {
         return instance.exportPDF();
       })
       .catch(function (error) {
         console.error(error.message);
       });
   </script>

6. Optionally, you can use the outputFormat flag to generate a PDF/A document. For more details, refer to the guide on converting PDF to PDF/A:

   // The `NutrientViewer.load()` call is omitted for brevity.
   .then(function(instance) {
       return instance.exportPDF({
         outputFormat: {
           conformance: PSPDFKit.Conformance.PDFA_4F
         }
       })
     })

7. Next, save the resulting document. The exportPDF method returns a Promise that resolves into an ArrayBuffer containing the output PDF document. You can use this array buffer to download the PDF or store it:

   .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);
   }

You can see the full code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Nutrient Viewer App</title>
  </head>
  <body>
    <!-- Element where NutrientViewer will be mounted -->
    <div id="nutrient" style="width: 100%; height: 100vh;"></div>

    <!-- Your application entry point -->
    <script type="module" src="index.js"></script>
  </body>
</html>

index.js:

import "./assets/nutrient-viewer.js";

// Build the base URL to the assets folder
const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

// Load a DOCX (or DOC) and mount the viewer
NutrientViewer.load({
  baseUrl, // path to your assets directory
  container: "#nutrient", // selector for the mount point
  document: "document.docx", // document file in your public folder
  // licenseKey: 'YOUR_LICENSE_KEY', // add if you have one
})
  .then((instance) => {
    console.log("NutrientViewer loaded", instance);

    // Immediately export as PDF
    return instance.exportPDF({
      // Optional: output PDF/A conformance
      outputFormat: {
        conformance: PSPDFKit.Conformance.PDFA_4F,
      },
    });
  })
  .then((buffer) => {
    // Convert the ArrayBuffer into a downloadable PDF
    const blob = new Blob([buffer], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);

    // Trigger download
    const a = document.createElement("a");
    a.href = url;
    a.download = "output.pdf";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    // Cleanup
    URL.revokeObjectURL(url);
  })
  .catch((error) => {
    console.error("Error:", error.message);
  });

Serving your website

You’ll use the npm serve package to serve your project.

1. Install the serve package:

   npm install --global serve

2. Serve the contents of the current directory:

   serve -l 8080 .

3. Navigate to http://localhost:8080 to view the website. The output.pdf file will be downloaded automatically.

A note about fonts

When you convert an Office document with custom fonts to a PDF, Nutrient Web SDK might not have access to these fonts due to licensing constraints. In this case, Nutrient typically replaces unavailable fonts with their equivalents — like Arial with Noto.

Conclusion

In this blog post, you learned how to convert Word (DOC and DOCX) to PDF using JavaScript with the Nutrient SDK. It also discussed the benefits of using Nutrient Web SDK to render Office documents in the browser. We hope you found this information helpful.

If you’re looking for a way to render Office documents in your web application, then Nutrient Web SDK is a great option. It’s a powerful and flexible library that can help you provide your users with a seamless and enjoyable experience.

To get started, you can either:

• Start your free trial to test out the library and see how it works in your application.
• Launch our demo to see the viewer in action.

FAQ

Here are a few frequently asked questions about converting Word to PDF.