How to convert Excel (XLS/XLSX) to PDF in JavaScript

In this blog post, you’ll learn how to convert Excel (XLS and XLSX) to PDF using JavaScript and Nutrient. Both XLS and XLSX files are converted to PDF documents in the client and don’t require any server-side processing.

Client-side Excel-to-PDF conversion

To convert Office documents such as XLS or XLSX 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, Excel 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 Excel-to-PDF conversion in your app or workflow.

• Open Excel 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 typeset, as explained in our troubleshooting guide.

To serve the files, you need to use an npm package like serve as a simple HTTP server.

Unlocking more capabilities with our Excel viewer

By combining client-side Excel-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 Excel 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 an Excel document.

Explore Demo

Requirements to get started

To get started, you’ll need:

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

Adding Nutrient to your project

1. Install the pspdfkit package from npm. If you prefer, you can also download Nutrient Web SDK manually:

npm install pspdfkit

2. For Nutrient Web SDK to work, it’s necessary to copy the directory containing all the required library files (artifacts) to the assets folder. Use the following command to do this:

cp -R ./node_modules/pspdfkit/dist/ ./assets/

Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Integrating into your project

1. Add an Excel (XLS, XLSX) document you want to display to your project’s directory. You can use our demo document as an example.

2. Add an empty <div> element with a defined width and height to where Nutrient will be mounted:

<div id="pspdfkit" style="width:100%; height: 100vh;"></div>

3. Include pspdfkit.js in your HTML page:

<script src="assets/pspdfkit.js"></script>

4. Initialize Nutrient Web SDK in JavaScript by calling the load() method.

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.

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
	 	document: "chart.xlsx" // Add the path to your document here.
	 	licenseKey: "YOUR_LICENSE_KEY" // Remove this line if you're using the free trial.
	})
</script>

This code will load chart.xlsx into the element with the ID pspdfkit.

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

<script>
	PSPDFKit.load({
		container: '#pspdfkit',
		document: 'chart.xlsx',
	})
		.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:

// `PSPDFKit.load()` call 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 ArrayBuffer 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 index.html file below:

<!DOCTYPE html>
<html>
	<head>
		<title>My App</title>
		<!-- Provide proper viewport information so that the layout works on mobile devices. -->
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
	</head>
	<body>
		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="width:100%; height: 100vh"></div>

		<script src="assets/pspdfkit.js"></script>
		<script>
			PSPDFKit.load({
				container: '#pspdfkit',
				document: 'chart.xlsx', // Add the path to your document here.
			})
				.then(function (instance) {
					return 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);
				})
				.catch(function (error) {
					console.error(error.message);
				});

			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);
			}
		</script>
	</body>
</html>

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.

Adding even more capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular JavaScript guides:

• Instant synchronization
• Document assembly
• Page manipulation
• Editor
• Forms
• Signatures
• Redaction
• Document security

Conclusion

In this blog post, you learned how to convert Excel (XLS and XLSX) to PDF using JavaScript with the Nutrient SDK.

If you’re looking for a way to render Office documents in your web application, Nutrient offers a JavaScript Office viewer. It’s a powerful and flexible library that enables you to open, view, edit, annotate, and sign documents directly in a web browser.

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 Excel to PDF.

What is Nutrient used for?

Nutrient is a software development kit (SDK) that allows developers to integrate document viewing, editing, and conversion features into web and mobile applications.

Can I convert Excel files to PDF on the client side?

Yes, Nutrient Web SDK supports client-side Excel-to-PDF conversion without requiring server-side processing.

Do I need Microsoft Office to convert Excel files to PDF?

No, Nutrient does not rely on Microsoft Office or any third-party tools to convert Excel files to PDF.

Can I edit and annotate the converted PDF?

Yes, Nutrient enables text editing, page manipulation, annotations, and more on the converted PDF.

Does Nutrient work with custom fonts in Excel files?

Nutrient replaces unavailable custom fonts with equivalents, like Arial with Noto, due to licensing constraints.