Search results

Open documents in Blazor Word processor from various storage location

You might need to open and view Word documents from various location. In this section, you can find the information about how to open Word documents from URL, cloud, database, and local file system and also how to load a document during control initialization.

Opening a document from URL

If you have your Word document file in the web, you can open it in Blazor Word Processor using URL. The following code example explains how to open a Word document file from URL.

@using Syncfusion.EJ2.DocumentEditor.Blazor
@using Syncfusion.EJ2.Blazor.DocumentEditor
@using WordProcessor = Syncfusion.EJ2.DocumentEditor
@using System.IO
@using System.Net
@using Newtonsoft.Json

<EjsDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</EjsDocumentEditorContainer>

@code {

    EjsDocumentEditorContainer container;

    string sfdtString;

    protected override void OnInit()
    {
        string fileUrl = "https://www.syncfusion.com/downloads/support/directtrac/general/doc/Getting_Started1018066633.docx";
        WebClient webClient = new WebClient();
        byte[] byteArray = webClient.DownloadData(fileUrl);
        Stream stream = new MemoryStream(byteArray);
        WordProcessor.WordDocument document = WordProcessor.WordDocument.Load(stream, WordProcessor.FormatType.Docx);
        sfdtString = JsonConvert.SerializeObject(document);
        document.Dispose();
        stream.Dispose();
    }

    public void OnLoad(object args)
    {
        DocumentEditorModule editor = container.GetDocumentEditor();
        editor.Open(sfdtString);
    }
}

Opening a document from Cloud

You can open the Word documents from Cloud storage. The following code example shows how to open and load the Word document file stored in Azure Blob Storage.

@using Syncfusion.EJ2.DocumentEditor.Blazor
@using Syncfusion.EJ2.Blazor.DocumentEditor
@using WordProcessor = Syncfusion.EJ2.DocumentEditor
@using System.IO
@using Microsoft.Azure.Storage
@using Microsoft.Azure.Storage.Blob
@using Newtonsoft.Json

<EjsDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</EjsDocumentEditorContainer>

@code {

    EjsDocumentEditorContainer container;

    string sfdtString;

    protected override void OnInit()
    {
        //Connection string of storage account
        string connectionString = "Here Place Your Connection string";
        //Container name
        string containerName = "document";
        //File name to be loaded into Syncfusion Document Editor
        string fileName = "Getting_Started.docx";
        CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(connectionString);
        CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();
        CloudBlobContainer cloudBlobContainer = cloudBlobClient.GetContainerReference(containerName);
        CloudBlockBlob cloudBlockBlob = cloudBlobContainer.GetBlockBlobReference(fileName);
        MemoryStream memoryStream = new MemoryStream();
        cloudBlockBlob.DownloadToStream(memoryStream);
        WordProcessor.WordDocument document = WordProcessor.WordDocument.Load(memoryStream, WordProcessor.FormatType.Docx);
        sfdtString = JsonConvert.SerializeObject(document);
        document.Dispose();
        memoryStream.Dispose();
    }
    public void OnLoad(object args)
    {
        DocumentEditorModule editor = container.GetDocumentEditor();
        editor.Open(sfdtString);
    }
}

Note: The Microsoft.Azure.Storage.Blob NuGet package must be installed in your application to use the previous code example.

You can open the Word documents from Azure File Storage using the following code example.

@using Syncfusion.EJ2.DocumentEditor.Blazor
@using Syncfusion.EJ2.Blazor.DocumentEditor
@using WordProcessor = Syncfusion.EJ2.DocumentEditor
@using System.IO
@using Microsoft.Azure.Storage
@using Microsoft.Azure.Storage.File
@using Newtonsoft.Json

<EjsDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</EjsDocumentEditorContainer>

@code {

    EjsDocumentEditorContainer container;

    string sfdtString;

    protected override void OnInit()
    {
        //Connection string of storage account
        string connectionString = "Here Place Your Connection string";
        //Container name
        string shareReference = "document";
        //String directoryReference = "document";
        //File name to be loaded into Syncfusion Document Editor
        string fileReference = "Getting_Started.docx";
        CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(connectionString);
        CloudFileClient fileClient = cloudStorageAccount.CreateCloudFileClient();
        //Get file share
        CloudFileShare cloudFileShare = fileClient.GetShareReference(shareReference);
        if (cloudFileShare.Exists())
        {
            //Get the related directory
            CloudFileDirectory dir = cloudFileShare.GetRootDirectoryReference();
            if (dir.Exists())
            {
                //Get the file reference
                CloudFile file = dir.GetFileReference(fileReference);
                MemoryStream memoryStream = new MemoryStream();
                //Download file to local disk
                file.DownloadToStream(memoryStream);
                WordProcessor.WordDocument document = WordProcessor.WordDocument.Load(memoryStream, WordProcessor.FormatType.Docx);
                sfdtString = JsonConvert.SerializeObject(document);
                document.Dispose();
                memoryStream.Dispose();
            }
        }
    }
    public void OnLoad(object args)
    {
        if (!String.IsNullOrEmpty(sfdtString))
        {
            DocumentEditorModule editor = container.GetDocumentEditor();
            editor.Open(sfdtString);
        }

    }

}

Note: The Microsoft.Azure.Storage.File NuGet package must be installed in your application to use the previous code example.

Opening a document from database

The following code example shows how to open the Word document file in viewer from SQL Server database.

@using System.IO;
@using Syncfusion.EJ2.DocumentEditor.Blazor
@using Syncfusion.EJ2.Blazor.DocumentEditor
@using System.Data.SqlClient
@using WordProcessor = Syncfusion.EJ2.DocumentEditor
@using Newtonsoft.Json

<EjsDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</EjsDocumentEditorContainer>

@code {

    EjsDocumentEditorContainer container;

    public void OnLoad(object args)
    {
        string documentID = "GettingStarted.docx";
        string connectionString = "Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=C:\\database.mdf;";
        SqlConnection connection = new SqlConnection(connectionString);
        //Searches for the Word document from the database
        string query = "select Data from DocumentsTable where DocumentName = '" + documentID + "'";
        SqlCommand command = new SqlCommand(query, connection);
        connection.Open();
        SqlDataReader read = command.ExecuteReader();
        read.Read();
        //Reads the Word document data as byte array from the database
        byte[] byteArray = (byte[])read["Data"];
        Stream stream = new MemoryStream(byteArray);
        WordProcessor.WordDocument document = WordProcessor.WordDocument.Load(stream, WordProcessor.FormatType.Docx);
        string json = JsonConvert.SerializeObject(document);
        document.Dispose();
        stream.Dispose();
        DocumentEditorModule editor = container.GetDocumentEditor();
        editor.Open(json);
    }

}

Note: The System.Data.SqlClient package must be installed in your application to use the previous code example. You need to modify the connectionString and query variable in the previous code example as per the connection string of your database.

Opening a document from file system

There is an UI option in built-in toolbar to open the Word documents from local file system. If you want to achieve the same functionality when design your own toolbar, you can use the following code example to load and open the Word documents. In this sample, the Syncfusion’s Uploader control is used for Blazor.

@using Syncfusion.EJ2.DocumentEditor.Blazor
@using Syncfusion.EJ2.Blazor.DocumentEditor
@using Syncfusion.EJ2.Blazor.Inputs
@using WordProcessor = Syncfusion.EJ2.DocumentEditor
@using System.IO
@using Newtonsoft.Json

<EjsUploader>
    <UploaderEvents FileSelected="OnSuccess"></UploaderEvents>
</EjsUploader>
<EjsDocumentEditorContainer @ref="container" EnableToolbar=false></EjsDocumentEditorContainer>

@code {

    EjsDocumentEditorContainer container;

    public void OnSuccess(SelectedEventArgs action)
    {
        string base64 = action.FilesData[0].RawFile.ToString();
        string fileName = action.FilesData[0].Name;
        string data = base64.Split(',')[1];
        byte[] bytes = Convert.FromBase64String(data);
        using (Stream stream = new MemoryStream(bytes))
        {
            WordProcessor.WordDocument document = WordProcessor.WordDocument.Load(stream, WordProcessor.FormatType.Docx);
            string sfdtString = JsonConvert.SerializeObject(document);
            document.Dispose();
            DocumentEditorModule editor = container.GetDocumentEditor();
            editor.Open(sfdtString);
        }
    }

}

Opening a document on control initialization

The Word document can be opened on control initialization, in this sample, the document is opened when the control is initialized.

@using System.IO
@using Syncfusion.EJ2.Blazor.DocumentEditor
@using WDocument = Syncfusion.EJ2.DocumentEditor
@using Newtonsoft.Json

<EjsDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</EjsDocumentEditorContainer>

@code {

    EjsDocumentEditorContainer container;

    public void OnLoad(object args)
    {
        string filePath = "wwwroot/data/GettingStarted.docx";
        using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
        {
            WDocument.WordDocument document = WDocument.WordDocument.Load(fileStream, WDocument.FormatType.Docx);
            string json = JsonConvert.SerializeObject(document);
            document.Dispose();
            DocumentEditorModule editor = container.GetDocumentEditor();
            editor.Open(json);
        }
    }
}