The Angular npm packages for DS Server enable the usage of DocumentEditor and DocumentViewer in Angular applications. The DS Server DocumentProcessing Web API can be used to merge JSON data into created templates to create documents in various formats including Adobe PDF, DOCX and DOC.

This sample shows how to use the document editor and the DocumentProcessing Web API in combination.

Document Editor

The app.component.html view contains the document editor and a button to merge the document:

Loading...

In the AppComponent constructor, dummy merge data is created and loaded into the document editor in the onDsDocumentEditorLoaded event.

Loading...

This fills the drop-down elements in the Reporting ribbon tab to insert merge fields and merge blocks into the document:

Angular application

Merge the Document

On the button click event, the Web API is called with a new MergeBody object that contains the merge data and the template. In this demo, these functions are separated into the module DsDocumentProcessingModule:

Loading...

The function mergeDocument accepts the MergeBody object and a return format. Implicitly, the function is calling OAuth endpoints to retrieve an access token in the getAccessToken function. This access token is then used to call the DocumentProcessing/Document/Merge method.

The resulting document is then loaded into the document editor:

Angular application

Download the Sample

The Web API can be also used to generate the resulting document as a PDF or any other supported document format. Typically, the templates are created in advance using the document editor and the Web API creates document in separate processes.

Feel free to test this on your own. All you need is a DS Server trial token and this sample from GitHub.