How to add word document/ any type of document to angular application?

You can use LEADTOOLS Document Imaging SDK technology in your application.

https://www.leadtools.com/sdk/document/document-viewer

You can leverage the DocumentViewer object in your Angular application, which will allow you to load and display any of the LEADTOOLS supported file formats(including DOCX, PDF, RTF, TXT, etc).

Here is some sample code:

ngAfterViewInit(){
var createOptions: lt.Document.Viewer.DocumentViewerCreateOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
// We will choose to use Elements Mode for this example, but you can disable it
// Elements Mode can be styled with CSS - see the HTML for information
createOptions.viewCreateOptions.useElements = true;
createOptions.thumbnailsCreateOptions.useElements = true;
// Set thumbnailsContainer to #thumbnails
createOptions.thumbnailsContainer = document.getElementById("thumbnails");
//createOptions.bookmarksContainer = document.getElementById("bookmarks");
// Set viewContainer to #documentViewer
createOptions.viewContainer = document.getElementById("documentViewer");
var documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// Set interactive mode to Pan / Zoom
documentViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom, true);
// We prefer SVG viewing over Image viewing for this example
documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// Change our thumbnails to be centered horizontally in the provided container
documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
// run the demo backend service from C:\LEADTOOLS21\Examples\JS\Services\DocumentServiceDotNet\fx\DocumentService.csproj
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; // or wherever your host is
lt.Document.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example
lt.Document.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentsService
// If the user did not set a license, use the eval one
//var licenseUrl = "https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt"; //online
//var licenseUrl = "http://localhost:40000/LEADTOOLS/LEADTOOLS.lic.txt"; //backend source gets CORS policy error. (Preferred method)
var licenseUrl = "http://localhost:4200/LEADTOOLS/LEADTOOLS.lic.txt"; //frontend works. (Fix CSS to show doc in viewer div) (non preferred method)
lt.RasterSupport.setLicenseUri(licenseUrl, null, function (setLicenseResult) {
// Check the status of the license
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
// Start using LEADTOOLS
// Create the document viewer
var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";
lt.Document.DocumentFactory.loadFromUri(url, null)
.done((document) => {
documentViewer.setDocument(document);
//TODO get thumbnails from server backend.
//TODO add icon bar for controls, then hookup events to icons to call lt. apis for annotcations, text select, mode, zoom
//view full width, height, etc.
})
.fail((jqXHR, statusText, errorThrown) => {
// Get more information from LEADTOOLS
var serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
lt.LTHelper.log(serviceError);
// Show an alert about what the issue is
var lines = [];
lines.push("Document Viewer Error:");
lines.push(serviceError.message);
lines.push(serviceError.detail);
lines.push("See console for details.")
alert(lines.join("\n"));
});
} else {
var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n";
// Add the message provided by LEADTOOLS for more information.
msg += setLicenseResult.result;
console.log(msg);
alert(msg);
// Exit the application
//exitTheApp();
}
});
}

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Satheesh Elumalai4y ago
Accepted answer
https://blog.angular-university.io/angular-file-upload/
Kip Hackman4y ago
You can use LEADTOOLS Document Imaging SDK technology in your application.
https://www.leadtools.com/sdk/document/document-viewer
You can leverage the DocumentViewer object in your Angular application, which will allow you to load and display any of the LEADTOOLS supported file formats(including DOCX, PDF, RTF, TXT, etc).
Here is some sample code:
ngAfterViewInit(){
    var createOptions: lt.Document.Viewer.DocumentViewerCreateOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();

    // We will choose to use Elements Mode for this example, but you can disable it
    // Elements Mode can be styled with CSS - see the HTML for information
    createOptions.viewCreateOptions.useElements = true;
    createOptions.thumbnailsCreateOptions.useElements = true;

    // Set thumbnailsContainer to #thumbnails
    createOptions.thumbnailsContainer = document.getElementById("thumbnails");
    //createOptions.bookmarksContainer = document.getElementById("bookmarks");

    // Set viewContainer to #documentViewer
    createOptions.viewContainer = document.getElementById("documentViewer");

    var documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);

    // Set interactive mode to Pan / Zoom
    documentViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom, true);

    // We prefer SVG viewing over Image viewing for this example
    documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;

    // Change our thumbnails to be centered horizontally in the provided container
    documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;

    // run the demo backend service from C:\LEADTOOLS21\Examples\JS\Services\DocumentServiceDotNet\fx\DocumentService.csproj
    lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; // or wherever your host is
    lt.Document.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example
    lt.Document.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentsService


    // If the user did not set a license, use the eval one
    //var licenseUrl = "https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt"; //online
    //var licenseUrl = "http://localhost:40000/LEADTOOLS/LEADTOOLS.lic.txt"; //backend source gets CORS policy error. (Preferred method)
    var licenseUrl = "http://localhost:4200/LEADTOOLS/LEADTOOLS.lic.txt"; //frontend works. (Fix CSS to show doc in viewer div) (non preferred method)
    lt.RasterSupport.setLicenseUri(licenseUrl, null, function (setLicenseResult) {
      // Check the status of the license
      if (setLicenseResult.result) {
        console.log("LEADTOOLS client license set successfully");
        // Start using LEADTOOLS
        // Create the document viewer

        var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";

        lt.Document.DocumentFactory.loadFromUri(url, null)
          .done((document) => {
              documentViewer.setDocument(document);

              //TODO get thumbnails from server backend.

              //TODO add icon bar for controls, then hookup events to icons to call lt. apis for annotcations, text select, mode, zoom
              //view full width, height, etc.

          })
          .fail((jqXHR, statusText, errorThrown) => {
              // Get more information from LEADTOOLS
              var serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
              lt.LTHelper.log(serviceError);
              // Show an alert about what the issue is
              var lines = [];
              lines.push("Document Viewer Error:");
              lines.push(serviceError.message);
              lines.push(serviceError.detail);
              lines.push("See console for details.")
              alert(lines.join("\n"));
          });
     } else {
        var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n";
        // Add the message provided by LEADTOOLS for more information.
        msg += setLicenseResult.result;
        console.log(msg);
        alert(msg);
        // Exit the application
        //exitTheApp();
     }
    });
  }
Leisl Martin4y ago
You can integrate Syncfusion Angular Word Processor which is a document editor. It is an Angular component used to compose, edit, view, and print Word (DOCX, WordML, DOC, RTF, TXT) documents in your Angular applications. Just like a conventional document editor, it has all the features such as Editing, Formatting, Printing, Importing and exporting.
Sachin Singh4y ago
in your appcomopnent.html/ any html
"[path to .doc]" type="application/msword">
It appears you do not have a Suitable plugin for this browser. You can download this file.
    "[path to .doc]">
    "button">download