Opening a document in Blazor DocumentEditor Component
25 Jan 202419 minutes to read
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.Blazor.DocumentEditor
@using System.IO
@using System.Net
@using System.Text.Json
<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
string sfdtString;
protected override void OnInitialized()
{
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);
//To observe the memory go down, null out the reference of byteArray variable.
byteArray = null;
WordDocument document = WordDocument.Load(stream, ImportFormatType.Docx);
stream.Dispose();
//To observe the memory go down, null out the reference of stream variable.
stream = null;
sfdtString = JsonSerializer.Serialize(document);
document.Dispose();
//To observe the memory go down, null out the reference of document variable.
document = null;
}
public async void OnLoad(object args)
{
SfDocumentEditor editor = container.DocumentEditor;
await editor.OpenAsync(sfdtString);
//To observe the memory go down, null out the reference of sfdtString variable.
sfdtString = null;
}
}
NOTE
As per the discussion thread #30064, null out the reference of streams and other instances when they are no longer required. Using this approach you’ll observe the memory go down and become stable.
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.Blazor.DocumentEditor
@using System.IO
@using Microsoft.Azure.Storage
@using Microsoft.Azure.Storage.Blob
@using System.Text.Json
<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
string sfdtString;
protected override void OnInitialized()
{
//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);
WordDocument document = WordDocument.Load(memoryStream, ImportFormatType.Docx);
memoryStream.Dispose();
//To observe the memory go down, null out the reference of memoryStream variable.
memoryStream = null;
sfdtString = JsonSerializer.Serialize(document);
document.Dispose();
//To observe the memory go down, null out the reference of document variable.
document = null;
}
public async void OnLoad(object args)
{
SfDocumentEditor editor = container.DocumentEditor;
await editor.OpenAsync(sfdtString);
//To observe the memory go down, null out the reference of sfdtString variable.
sfdtString = null;
}
}
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.Blazor.DocumentEditor
@using System.IO
@using Microsoft.Azure.Storage
@using Microsoft.Azure.Storage.File
@using System.Text.Json
<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
string sfdtString;
protected override void OnInitialized()
{
//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);
WordDocument document = WordDocument.Load(memoryStream, ImportFormatType.Docx);
memoryStream.Dispose();
//To observe the memory go down, null out the reference of memoryStream variable.
memoryStream = null;
sfdtString = JsonSerializer.Serialize(document);
document.Dispose();
//To observe the memory go down, null out the reference of document variable.
document = null;
}
}
}
public async void OnLoad(object args)
{
if (!String.IsNullOrEmpty(sfdtString))
{
SfDocumentEditor editor = container.DocumentEditor;
await editor.OpenAsync(sfdtString);
//To observe the memory go down, null out the reference of sfdtString variable.
sfdtString = null;
}
}
}
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.Blazor.DocumentEditor
@using System.Data.SqlClient
@using System.Text.Json
<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
public async 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);
//To observe the memory go down, null out the reference of byteArray variable.
byteArray = null;
WordDocument document = WordDocument.Load(stream, ImportFormatType.Docx);
stream.Dispose();
//To observe the memory go down, null out the reference of stream variable.
stream = null;
string json = JsonSerializer.Serialize(document);
document.Dispose();
//To observe the memory go down, null out the reference of document variable.
document = null;
SfDocumentEditor editor = container.DocumentEditor;
await editor.OpenAsync(json);
//To observe the memory go down, null out the reference of json variable.
json = null;
}
}
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.Blazor.DocumentEditor
@using Syncfusion.Blazor.Inputs
@using System.IO
@using System.Text.Json
<SfUploader>
<UploaderEvents OnUploadStart="OnSuccess"></UploaderEvents>
<UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>
</SfUploader>
<SfDocumentEditorContainer @ref="container" EnableToolbar=false></SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
public async void OnSuccess(UploadingEventArgs action)
{
string base64 = action.FileData.RawFile.ToString();
string fileName = action.FileData.Name;
string data = base64.Split(',')[1];
byte[] bytes = Convert.FromBase64String(data);
using (Stream stream = new MemoryStream(bytes))
{
WordDocument document = WordDocument.Load(stream, ImportFormatType.Docx);
string sfdtString = JsonSerializer.Serialize(document);
document.Dispose();
//To observe the memory go down, null out the reference of document variable.
document = null;
SfDocumentEditor editor = container.DocumentEditor;
await editor.OpenAsync(sfdtString);
//To observe the memory go down, null out the reference of sfdtString variable.
sfdtString = null;
}
action.Cancel = true;
}
}
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.Blazor.DocumentEditor
@using System.Text.Json
<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
public async void OnLoad(object args)
{
string filePath = "wwwroot/data/GettingStarted.docx";
using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
{
WordDocument document = WordDocument.Load(fileStream, ImportFormatType.Docx);
string json = JsonSerializer.Serialize(document);
document.Dispose();
//To observe the memory go down, null out the reference of document variable.
document = null;
SfDocumentEditor editor = container.DocumentEditor;
await editor.OpenAsync(json);
//To observe the memory go down, null out the reference of json variable.
json = null;
}
}
}
You can also explore our Blazor Word Processor example to know how to render and configure the document editor.
Opening a document with TIFF, EMF and WMF images
The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the MetafileImageParsed
event and this fallback raster image will be displayed in the client-side Document editor component.
Note: In
MetafileImageParsedEventArgs
event argument, you can get the metafile stream usingMetafileStream
property and you can get theIsMetafile
boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image inConvertTiffToRasterImage()
method usingBitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET
.
The following example code illustrates how to use MetafileImageParsed
event for creating fallback raster image for metafile present in a Word document.
@using SkiaSharp
@using BitMiracle.LibTiff.Classic;
@using Syncfusion.Blazor.DocumentEditor
<SfDocumentEditorContainer UseDefaultEditor="false">
<SfDocumentEditor>
<DocumentEditorEvents MetafileImageParsed="OnMetafileImageParsed"></DocumentEditorEvents>
</SfDocumentEditor>
</SfDocumentEditorContainer>
@code{
//Converts Metafile to raster image.
private void OnMetafileImageParsed(MetafileImageParsedEventArgs args)
{
if (args.IsMetafile)
{
//MetaFile image conversion(EMF and WMF)
//You can write your own method definition for converting metafile to raster image using any third-party image converter.
args.ImageStream = ConvertMetafileToRasterImage(args.MetafileStream);
}
else
{
//TIFF image conversion
args.ImageStream = TiffToPNG(args.MetafileStream);
}
}
// Converting Tiff to Png image using Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET
private static MemoryStream TiffToPNG(Stream tiffStream)
{
MemoryStream imageStream = new MemoryStream();
using (Tiff tif = Tiff.ClientOpen("in-memory", "r", tiffStream, new TiffStream()))
{
// Find the width and height of the image
FieldValue[] value = tif.GetField(BitMiracle.LibTiff.Classic.TiffTag.IMAGEWIDTH);
int width = value[0].ToInt();
value = tif.GetField(BitMiracle.LibTiff.Classic.TiffTag.IMAGELENGTH);
int height = value[0].ToInt();
// Read the image into the memory buffer
int[] raster = new int[height * width];
if (!tif.ReadRGBAImage(width, height, raster))
{
throw new Exception("Could not read image");
}
// Create a bitmap image using SkiaSharp.
using (SKBitmap sKBitmap = new SKBitmap(width, height, SKImageInfo.PlatformColorType, SKAlphaType.Premul))
{
// Convert a RGBA value to byte array.
byte[] bitmapData = new byte[sKBitmap.RowBytes * sKBitmap.Height];
for (int y = 0; y < sKBitmap.Height; y++)
{
int rasterOffset = y * sKBitmap.Width;
int bitsOffset = (sKBitmap.Height - y - 1) * sKBitmap.RowBytes;
for (int x = 0; x < sKBitmap.Width; x++)
{
int rgba = raster[rasterOffset++];
bitmapData[bitsOffset++] = (byte)((rgba >> 16) & 0xff);
bitmapData[bitsOffset++] = (byte)((rgba >> 8) & 0xff);
bitmapData[bitsOffset++] = (byte)(rgba & 0xff);
bitmapData[bitsOffset++] = (byte)((rgba >> 24) & 0xff);
}
}
// Convert a byte array to SKColor array.
SKColor[] sKColor = new SKColor[bitmapData.Length / 4];
int index = 0;
for (int i = 0; i < bitmapData.Length; i++)
{
sKColor[index] = new SKColor(bitmapData[i + 2], bitmapData[i + 1], bitmapData[i], bitmapData[i + 3]);
i += 3;
index += 1;
}
// Set the SKColor array to SKBitmap.
sKBitmap.Pixels = sKColor;
// Save the SKBitmap to PNG image stream.
sKBitmap.Encode(SKEncodedImageFormat.Png, 100).SaveTo(imageStream);
imageStream.Flush();
}
}
return imageStream;
}
}