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

Question

How to add word document/ any type of document to angular application? To view word document, pdf from webpage itself in angular from local storage.

Satheesh Elumalai · Answer

https://blog.angular-university.io/angular-file-upload/

Leisl Martin · Answer

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 Singh · Answer

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

Kip Hackman · Answer

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( "
" )); }); } else { var msg = "LEADTOOLS License is missing, invalid or expired
Error:
" ; // Add the message provided by LEADTOOLS for more information. msg += setLicenseResult.result; console.log(msg); alert(msg); // Exit the application //exitTheApp(); } }); }

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

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)