Having trouble getting help?
Contact Support
Contact Support
Open document by address in Angular Document editor component
3 May 20254 minutes to read
How to open a document from URL in Angular Document Editor
In this article, we are going to see how to open a document from URL in DocumentEditor
please refer below example for client-side code
import { Component, OnInit, ViewChild } from '@angular/core';
import {
DocumentEditorContainerComponent,
ToolbarService,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
selector: 'app-root',
// specifies the template string for the DocumentEditorContainer component
template: `<button id='export'(click)="onClick(this)">Export</button><ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
providers: [ToolbarService],
})
export class AppComponent implements OnInit {
@ViewChild('documenteditor_default')
public container: DocumentEditorContainerComponent;
ngOnInit(): void {}
onClick(): void {
let http: XMLHttpRequest = new XMLHttpRequest();
//add your url in which you want to open document inside the ""
let content = { fileUrl: '' };
let baseurl: string = '/api/documenteditor/ImportFileURL';
http.open('POST', baseurl, true);
http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
http.onreadystatechange = () => {
if (http.readyState === 4) {
if (http.status === 200 || http.status === 304) {
//open the SFDT text in Document Editor
this.container.documentEditor.open(http.responseText);
}
}
};
http.send(JSON.stringify(content));
}
}
The Web API hosted link
https://services.syncfusion.com/angular/production/api/documenteditor/
utilized in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
please refer below example for server-side code
[AcceptVerbs("Post")]
public string ImportFileURL([FromBody]FileUrlInfo param)
{
try {
using(WebClient client = new WebClient())
{
MemoryStream stream = new MemoryStream(client.DownloadData(param.fileUrl));
WordDocument document = WordDocument.Load(stream, FormatType.Docx);
string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
document.Dispose();
stream.Dispose();
return json;
}
}
catch (Exception) {
return "";
}
}
public class FileUrlInfo {
public string fileUrl { get; set; }
public string Content { get; set; }
}