Need one sample Angular Syncfusion Control for Save content to blob as DOCX & Convert DOCX to SFDT

[Darshan]

Hello Team,

Need one sample Angular Syncfusion Control for Save content to blob as DOCX & Convert DOCX to SFDT 

Regards,

Darshan

[Darshan]

Hello team,

We would need a sample for the below functionality.

Syncfusion DocumentEditor in angular

Display list of files from blob server (.docx) if exists 

Docx file can be edited and saved in blob server ( need to call API when clicked on save button)

Convert docx file in to PDF

Attached is the reference. let us know if needed further clarifications.

Regards,

Darshan

[Ramya Thirugnanam]

Hi Darshan,  

  

Thanks for contacting Syncfusion support.  

  

 We have prepared an Angular sample for following requirement.  

  

Requirement	Response
Display list of files from blob server (.docx) if exists	Add dropdown button in tittle bar which shows list of files available in App_Data folder.
Docx file can be edited and saved in blob server ( need to call API when clicked on save button)	Added option to save edited file back to 'App_Data' folder in web server.
Convert docx file in to PDF	Added option  to save the document as PDF in 'App_Data' folder in web server.

  

  

Please find the sample from below link :   

  

Angular Front End : http://www.syncfusion.com/downloads/support/directtrac/general/ze/DocumentEditorFrontEnd365940186.zip   

  

Server Side WEB API: http://www.syncfusion.com/downloads/support/directtrac/general/ze/DocumentEditorWebAPI409250097.zip   

  

Note: Above angular sample is depend on web api for opening and saving files. So, please run both sample simultaneously to make all the options work properly. And also replace the web api url at line no.19 in 'title-bar.ts'  Kindly try this sample and let us know if this help you.  

 

Regards, 

Ramya T 

[Darshan]

Hi Ramya,

Thank you for the updates , It is working  using Angular Syncfusion Control .

 Also could you help me on the below query .

> Can we save updated file content in azure blob ( either sfdt or docx  format) using angular +  API 

> Import docx or sfdt file from azure blob and load in to syncfusion document editor

let me know if any clarifications.

Regards,

Darshan

[Ramya Thirugnanam]

Hi Darshan, 

 

Regarding “Import docx or sfdt file from azure blob and load in to syncfusion document editor”  

   

We can Import docx or sfdt file from azure blob and load it in DocumentEditor by using ‘WebClient’. Please find the sample code to import file from azure blob URL and load it in DocumentEditor below.  

  

C# Web API sample code  

// Import blob from Azure and convert it to Sfdt format   

[HttpPost]  

public HttpResponseMessage ImportBlob(string blobPath)  

{  

    WebClient client = new WebClient();  

    //Download data from azure blob path as byte array  

    byte[] doc = client.DownloadData(blobPath);  

    //Convert byte array to stream   

    Stream stream = new MemoryStream(doc);  

    stream.Position = 0;  

    string type = "";  

    int index = blobPath.LastIndexOf('.');  

    type = index > -1 && index < blobPath.Length - 1 ? blobPath.Substring(index + 1) : "";  

    type = type.ToLower();  

    string json = "";  

    //If the file is in sfdt format we can directly open it in document editor  

    if (type == "sfdt")  

    {  

        StreamReader reader = new StreamReader(stream);  

        // Read content of stream as string  

        json = reader.ReadToEnd();  

        reader.Dispose();  

    }  

    else  

    {  

        // Convert word document to Sfdt format  

        WordDocument document = WordDocument.Load(stream, GetFormatType(type));  

        json = Newtonsoft.Json.JsonConvert.SerializeObject(document);  

        document.Dispose();  

    }  

    stream.Dispose();  

    return new HttpResponseMessage() { Content = new StringContent(json) };  

 }  

   

Regarding “Can we save updated file content in azure blob using angular +  API “  

  

We can save the modified docx/sfdt file back to azure blob by using below web api code.  

  

C# Web API  

public string SaveAsBlob([FromBody]DocumentInfo blobInfo)  

{  

    string status = "";  

    try  

    {  

        string blobPath = blobInfo.blobPath;  

        Stream documentstrem = new MemoryStream(Convert.FromBase64String(blobInfo.blobContent.Split(',')[1]));  

        documentstrem.Position = 0;  

        SaveDocument(blobPath, documentstrem).GetAwaiter().GetResult();  

        status = "success";  

    }  

    catch  

    {  

        status = "failure";  

    }  

    return status;  

}  

internal async Task SaveDocument(string blobPath, Stream stream)  

{  

    // Provide your Azure account name and key  

    StorageCredentials creds = new StorageCredentials(accountName, accountKey);  

    CloudStorageAccount account = new CloudStorageAccount(creds, useHttps: true);  

    CloudBlobClient client = account.CreateCloudBlobClient();  

    // Provide blob name  

    CloudBlobContainer container = client.GetContainerReference(blobName);  

    //Get only the file path from azure URL  

    string filePath = blobPath.Replace("https://" + accountName + ".blob.core.windows.net/" + blobName + "/", "");  

    CloudBlockBlob blob = container.GetBlockBlobReference(filePath);  

    stream.Position = 0;  

    await blob.UploadFromStreamAsync(stream);  

}  

  

  

C# Model  

public class DocumentInfo  

{  

    public string blobPath;  

    public string blobContent;  

}  

  

 Front End Angular  

public saveToBlob() {  

  this.documentEditor.saveAsBlob('Docx').then(function (blob) {  

    var fileReader = new FileReader();  

  

    fileReader.onload = function () {  

      var httpRequest = new XMLHttpRequest();  

      httpRequest.open('POST', '/api/DocumentEditor/SaveAsBlob', true);  

      httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");  

      httpRequest.onreadystatechange = function () {  

        if (httpRequest.readyState === 4) {  

          if (httpRequest.status === 200 || httpRequest.status === 304) {  

            console.log(httpRequest.responseText);  

          }  

        }  

      }  

      var data = {  

        // Added azure path to save the blob  

        blobPath: documentPath,  

        blobContent: fileReader.result  

      };  

      httpRequest.send(JSON.stringify(data));  

    }  

  

    fileReader.readAsDataURL(blob);  

  });  

}  

  

  

 We have updated this change in the sample which we have provided in our previous update. Please find the modified sample from below link   

  

Front End : http://www.syncfusion.com/downloads/support/forum/142830/ze/DocumentEditorFrontEnd-1282592926  

Web API Back End: http://www.syncfusion.com/downloads/support/forum/142830/ze/DocumentEditorWebAPI1039555495   

 

Note: Kindly update you azure account details in Web API sample.  

 

Regards, 

Ramya T 

[Darshan]

Hi Ramya,

Thank you for the update,  it was working. Iam able to import all files list and Import filename(Download) No issues.

while click on SaveasBlob it doesn't save in blob storage ,cpuld you clarify the below

string filePath = blobPath.Replace("https://" + accountName + ".blob.core.windows.net/" + blobName + "/", "");  -- This replace empty values in filePath .

also i have verified blob connectionstring are correct. Attached is the error screen shot of browser

Could you help me on this

Regards,

Darshan

[Ramya Thirugnanam]

Hi Darshan,  

 

Thanks for your update.  

 

//Get only blob path from azure URL  

string filePath = blobPath.Replace("https://" + accountName + ".blob.core.windows.net/" +blobName + "/", "");  

CloudBlockBlob blob = container.GetBlockBlobReference(filePath);  

  

   

In the above code example “GetBlockBlobReference” method expect relative path to the blob. So, we have added code to get only blob name from the azure URL i.e. ‘https://xxxxx.blob.core.windows.net.xxxxx/documentName.docx’ --> “documentName.docx”. So, if your blobPath contain only blob name “documentName.docx” you can directly pass it to “GetBlockBlobReference” method as shown in the below code example.  

 

public async Task SaveDocument(string blobPath, Stream stream) {  

    StorageCredentials creds = new StorageCredentials(accountName, accountKey);  

    CloudStorageAccount account = new CloudStorageAccount(creds, useHttps: true);  

    CloudBlobClient client = account.CreateCloudBlobClient();  

    CloudBlobContainer container = client.GetContainerReference(blobName);  

    CloudBlockBlob blob = container.GetBlockBlobReference(blobPath);  

    stream.Position = 0;  

    await blob.UploadFromStreamAsync(stream);  

}  

  

Regards,  

Ramya T 

[Darshan]

Hi Ramya,

Thank you for your prompt support. It is working now.

In case of any will revert you.

Regards,

Darshan

[Ramya Thirugnanam]

Hi Darshan, 

 

Thanks for your update. 

 

Regards, 

Ramya T 

[Darshan]

Hi Ramya,

Can you let me know how to merge the signature and pdf content and form a final document which is signed ?

Regards,

Darshan

[Ramya Thirugnanam]

Hi Darshan,   

 

Thanks for you update.   

 

Please find the below code example which I have included the code for merge signature in PDF document.   

 

Sample code:   

 

Syncfusion.DocIO.DLS.WordDocument wordDocument = newSyncfusion.DocIO.DLS.WordDocument(stream,Syncfusion.DocIO.FormatType.Docx);   

DocToPDFConverter converter = new DocToPDFConverter();   

   

PdfDocument pdf = converter.ConvertToPDF(wordDocument);   

//Creates a certificate instance from PFX file with private key   

PdfCertificate pdfCert = new PdfCertificate(certificatePath,"syncfusion");   

//Creates a digital signature   

PdfSignature signature = new PdfSignature(pdf, pdf.Pages[0], pdfCert,"Signature");           

//Sets signature information   

signature.ContactInfo = "[email protected]";   

signature.LocationInfo = "Honolulu, Hawaii";   

signature.Reason = "I am author of this document.";   

MemoryStream stream = new MemoryStream();   

pdf.Save(stream);   

pdf.Close(true);   

wordDocument.Close();   

   

string path =System.Web.HttpContext.Current.Server.MapPath("~/App_Data/");   

FileStream fileStream = new FileStream(path + fileName,FileMode.OpenOrCreate, FileAccess.ReadWrite);   

stream.Position = 0;   

stream.CopyTo(fileStream);   

stream.Close();   

fileStream.Close();   

return "Sucess";   

  

We have integrated this in web api sample which we have provided earlier. Please find the sample from below link.   

Web API: http://www.syncfusion.com/downloads/support/forum/142830/ze/DocumentEditorWebAPI1896237003   

   

Please find the UG documentation link to add signature to PDF document from below,   

https://help.syncfusion.com/file-formats/pdf/working-with-digitalsignature#adding-a-digital-signature   

 

Note: Kindly updated you PFX certificate file path in PdfCertificate class. 

 

Regards,  

Ramya T  

[bob ingham]

I'm not sure how Darshan got this working as the following code outlined in Ramya's angular example is trying to put a byte array into a string:

var data = {  

  // Added azure path to save the blob  

  blobPath: documentPath,  

  blobContent: fileReader.result  

};  

httpRequest.send(JSON.stringify(data));

To get the example to work and place the document in a reactive form I had to explicitly cast:

  save(): void {

    let self = this;

    this.documentContainer.documentEditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {

      let fileReader = new FileReader();

      fileReader.onload = (function () {

        let docInfo = new CreateOrEditNcDocumentWordInfo();

        docInfo.blobPath = self.ncDocument.uri;

        docInfo.blobContent = fileReader.result as string;

        self.documentSaveModal.show(self.ncDocument, self.ncEntity, docInfo);

      });

      fileReader.readAsDataURL(exportedDocument);

    });

That then allowed me to pass the document to a modal to add control data and post it as an element in a reactive form.

Hope this helps whoever may be trying to do similar.