Convert Office to PDF in Progressive Web Apps
PSPDFKit for Web is a client-side JavaScript library that’s fully compatible with Progressive Web Apps 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.
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.
-
Load the source Office document. Optional: To load the document without a visual interface visible to the user, use the
headless
parameter. -
Optional: Make changes to the document. For example, add annotations.
-
Convert the source document to a PDF with the
exportPDF
method. Optional: Use theoutputFormat
flag to create a PDF/A document. For more information, see converting PDF to PDF/A. -
Save the output document. The
exportPDF
method returns aPromise
that resolves to anArrayBuffer
that contains the output PDF document. You can use the resultingArrayBuffer
to download or persist the output PDF in storage. For more information on downloading or persisting the exportedArrayBuffer
, see the guides on saving a document.
If you need to convert multiple Office files to PDF, follow this guide instead.
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:
-
Load the custom fonts. For more information, see the guide on adding custom fonts.
-
Load the source Office document. Optional: To load the document without a visual interface visible to the user, use the
headless
parameter. -
Optional: Make changes to the document. For example, add annotations.
-
Convert the source document to a PDF with the
exportPDF
method. Optional: Use theoutputFormat
flag to create a PDF/A document. For more information, see converting PDF to PDF/A. -
Save the output document. The
exportPDF
method returns aPromise
that resolves to anArrayBuffer
that contains the output PDF document. You can use the resultingArrayBuffer
to download or persist the output PDF in storage. For more information on downloading or persisting the exportedArrayBuffer
, 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.
-
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.
-
-
Save the output document. The
convertToPDF
method returns aPromise
that resolves to anArrayBuffer
that contains the output PDF document. You can use the resultingArrayBuffer
to download or persist the output PDF in storage. For more information on downloading or persisting the exportedArrayBuffer
, 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:
-
Load the custom fonts. For more information, see the guide on adding custom fonts.
-
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.
-
-
Save the output document. The
convertToPDF
method returns aPromise
that resolves to anArrayBuffer
that contains the output PDF document. You can use the resultingArrayBuffer
to download or persist the output PDF in storage. For more information on downloading or persisting the exportedArrayBuffer
, 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.