diff --git a/ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md b/ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md new file mode 100644 index 0000000000..49499f98d1 --- /dev/null +++ b/ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md @@ -0,0 +1,34 @@ +--- +layout: post +title: Load webp format image in ##Platform_Name## Accordion Control | Syncfusion +description: Learn here all about how to load webp format image in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Load images in webp format +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Load webp format image in Carousel component + +You can load the carousel image in the webp format, which aims to create smaller, better-looking images. Choosing webp as your image format can significantly improve your website's performance without sacrificing visual quality. webp images are significantly smaller in file size compared to formats like JPEG and PNG. This results in faster load times and less data usage. To achieve this, you can convert your image format to webp and pass them to Carousel items. The following sample illustrates how to load a carousel image in the webp format component. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/carousel/how-to/carousel-webp/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/carousel/how-to/carousel-webp/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Wizard.cs" %} +{% include code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs new file mode 100644 index 0000000000..fe2d1d829e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs @@ -0,0 +1,4 @@ +public ActionResult Index() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor new file mode 100644 index 0000000000..ba025472db --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor @@ -0,0 +1,55 @@ +@using Syncfusion.EJ2.Navigations; + +
+
+ @(Html.EJS().Carousel("defaultCarousel").PartialVisible(true).Items(new List { + new CarouselItem { Template = "#itemTemplate1" }, + new CarouselItem { Template = "#itemTemplate2" }, + new CarouselItem { Template = "#itemTemplate3" }, + }) + .Render() + ) +
+
+ + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper new file mode 100644 index 0000000000..d8fd46f3ed --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper @@ -0,0 +1,54 @@ +
+
+ + + + + + + +
+
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor index 910a842d0c..884e4ada4c 100644 --- a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor +++ b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor @@ -18,6 +18,7 @@ "week": "Hét", "workWeek": "Munkahét", "month": "Hónap", + "year": "Év", "agenda": "Napirend", "weekAgenda": "Hét menetrend", "workWeekAgenda": "Munkahét napirend", @@ -44,6 +45,7 @@ "subject": "Tantárgy", "addTitle": "Cím hozzáadása", "moreDetails": "További részletek", + "moreEvents": "Több esemény", "save": "Mentés", "editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?", "deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?", @@ -66,12 +68,16 @@ "createError": "Az esemény időtartamának rövidebbnek kell lennie, mint a gyakorisága. Rövidítse az időtartamot, vagy változtassa meg az ismétlődési esemény szerkesztőjének ismétlődési mintáját.", "recurrenceDateValidation": "Néhány hónap kevesebb, mint a kiválasztott dátum. Ezekben a hónapokban az esemény a hónap utolsó napjára esik.", "sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.", + "occurenceAlert": "Nem lehet átütemezni az ismétlődő találkozó előfordulását, ha átugrik ugyanazon találkozó későbbi előfordulását.", "editRecurrence": "Ismétlés szerkesztése", "repeats": "ismétlődés", "alert": "Éber", "startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.", "invalidDateError": "A megadott dátumérték érvénytelen.", + "blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.", "ok": "Rendben", + "yes": "Igen", + "no": "Nem", "occurrence": "Esemény", "series": "Sorozat", "previous": "Előző", @@ -80,8 +86,16 @@ "timelineWeek": "Idősor-hét", "timelineWorkWeek": "Idővonal munkahét", "timelineMonth": "Idővonal hónap", + "timelineYear": "Idővonal év", "expandAllDaySection": "kiterjed", - "collapseAllDaySection": "összeomlás" + "collapseAllDaySection": "összeomlás", + "editFollowingEvent": "Következő események", + "deleteTitle": "Esemény törlése", + "editTitle": "Esemény szerkesztése", + "beginFrom": "Kezdje", + "endAt": "Vége", + "searchTimezone": "Időzóna keresése", + "noRecords": "Nincs találat" }, "recurrenceeditor": { "none": "Egyik sem", diff --git a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper index b89684de68..e0adc550c9 100644 --- a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper @@ -13,6 +13,7 @@ "week": "Hét", "workWeek": "Munkahét", "month": "Hónap", + "year": "Év", "agenda": "Napirend", "weekAgenda": "Hét menetrend", "workWeekAgenda": "Munkahét napirend", @@ -39,6 +40,7 @@ "subject": "Tantárgy", "addTitle": "Cím hozzáadása", "moreDetails": "További részletek", + "moreEvents": "Több esemény", "save": "Mentés", "editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?", "deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?", @@ -61,12 +63,16 @@ "createError": "Az esemény időtartamának rövidebbnek kell lennie, mint a gyakorisága. Rövidítse az időtartamot, vagy változtassa meg az ismétlődési esemény szerkesztőjének ismétlődési mintáját.", "recurrenceDateValidation": "Néhány hónap kevesebb, mint a kiválasztott dátum. Ezekben a hónapokban az esemény a hónap utolsó napjára esik.", "sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.", + "occurenceAlert": "Nem lehet átütemezni az ismétlődő találkozó előfordulását, ha átugrik ugyanazon találkozó későbbi előfordulását.", "editRecurrence": "Ismétlés szerkesztése", "repeats": "ismétlődés", "alert": "Éber", "startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.", "invalidDateError": "A megadott dátumérték érvénytelen.", + "blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.", "ok": "Rendben", + "yes": "Igen", + "no": "Nem", "occurrence": "Esemény", "series": "Sorozat", "previous": "Előző", @@ -75,8 +81,16 @@ "timelineWeek": "Idősor-hét", "timelineWorkWeek": "Idővonal munkahét", "timelineMonth": "Idővonal hónap", + "timelineYear": "Idővonal év", "expandAllDaySection": "kiterjed", - "collapseAllDaySection": "összeomlás" + "collapseAllDaySection": "összeomlás", + "editFollowingEvent": "Következő események", + "deleteTitle": "Esemény törlése", + "editTitle": "Esemény szerkesztése", + "beginFrom": "Kezdje", + "endAt": "Vége", + "searchTimezone": "Időzóna keresése", + "noRecords": "Nincs találat" }, "recurrenceeditor": { "none": "Egyik sem", diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md index 9429f80f8e..1efa35cef8 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md @@ -1,6 +1,6 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component description: Learn here all about how to Open PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer @@ -10,6 +10,86 @@ documentation: ug # Open PDF file from AWS S3 +PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3. + +## Using Standalone PDF Viewer + +To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below + +**Step 1:** Create AWS S3 account + +Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET MVC + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC. + +**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +loadDocument() { + const s3 = new AWS.S3(); + const getObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + }; + this.s3.getObject(getObjectParams, (err, data) => { + if (err) { + console.error('Error fetching document:', err); + } else { + if (data && data.Body) { + const bytes = new Uint8Array(data.Body as ArrayBuffer); + let binary = ''; + bytes.forEach((byte) => (binary += String.fromCharCode(byte))); + const base64String = window.btoa(binary); + console.log('Document data as Base64:', base64String); + var viewer = (document.getElementById("pdfViewer")).ej2_instances[0]; + setTimeout(() => { + viewer.load("data:application/pdf;base64,"+base64String); + }, 2000); + } + } + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below **Step 1:** Create AWS S3 account @@ -98,4 +178,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md index 355e4bf8d2..b7d6fd2c18 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md @@ -1,7 +1,7 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component -description: Save PDF files to AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component +description: Learn here all about how to Save PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer publishingplatform: ##Platform_Name## @@ -10,6 +10,121 @@ documentation: ug # Save PDF file to AWS S3 +PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3. + +## Using Standalone PDF Viewer + +To save a PDF file to AWS S3 bucket, you can follow the steps below + +**Step 1:** Create AWS S3 account + + Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET MVC + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC. + +**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage. + +```csharp +
+
+ @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").Created("loadDocument").ToolbarClick("toolbarClick").Render() +
+
+ + +``` + +3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +function saveDocument() { + const s3 = new AWS.S3(); + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; + pdfViewer.saveAsBlob().then(function (value) { + var reader = new FileReader(); + reader.onload = () => { + const uint8Array = new Uint8Array(reader.result); + const putObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + Body: uint8Array, + ContentType: 'application/pdf', + }; + s3.putObject(putObjectParams, (err, data) => { + if (err) { + console.error('Error uploading document:', err); + } else { + console.log('Document uploaded successfully:', data); + } + }); + }; + reader.readAsArrayBuffer(value); + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To save a PDF file to AWS S3 bucket, you can follow the steps below **Step 1:** Create AWS S3 account @@ -90,4 +205,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md index 0478ab7f21..82280a1a75 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md @@ -1,6 +1,6 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component description: Learn here all about how to Open PDF files from AWS S3 in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer @@ -10,6 +10,86 @@ documentation: ug # Open PDF file from AWS S3 +PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3. + +## Using Standalone PDF Viewer + +To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below + +**Step 1:** Create AWS S3 account + + Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET Core + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET Core. + +**Step 3:** Modify the `~/Pages/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Pages/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +loadDocument() { + const s3 = new AWS.S3(); + const getObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + }; + this.s3.getObject(getObjectParams, (err, data) => { + if (err) { + console.error('Error fetching document:', err); + } else { + if (data && data.Body) { + const bytes = new Uint8Array(data.Body as ArrayBuffer); + let binary = ''; + bytes.forEach((byte) => (binary += String.fromCharCode(byte))); + const base64String = window.btoa(binary); + console.log('Document data as Base64:', base64String); + var viewer = (document.getElementById("pdfViewer")).ej2_instances[0]; + setTimeout(() => { + viewer.load("data:application/pdf;base64,"+base64String); + }, 2000); + } + } + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below **Step 1:** Create AWS S3 account @@ -132,4 +212,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md index c3d7a6fd60..29f481096e 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md @@ -1,6 +1,6 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component description: Save PDF files to AWS S3 in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer @@ -10,6 +10,117 @@ documentation: ug # Save PDF file to AWS S3 +PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3. + +## Using Standalone PDF Viewer + +To save a PDF file to AWS S3, you can follow the steps below + +**Step 1:** Create AWS S3 account + + Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET Core + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET Core. + +**Step 3:** Modify the `~/Pages/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Pages/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage. + +```csharp +
+ + +
+ + +``` + +3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +function saveDocument() { + const s3 = new AWS.S3(); + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; + pdfViewer.saveAsBlob().then(function (value) { + var reader = new FileReader(); + reader.onload = () => { + const uint8Array = new Uint8Array(reader.result); + const putObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + Body: uint8Array, + ContentType: 'application/pdf', + }; + s3.putObject(putObjectParams, (err, data) => { + if (err) { + console.error('Error uploading document:', err); + } else { + console.log('Document uploaded successfully:', data); + } + }); + }; + reader.readAsArrayBuffer(value); + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To save a PDF file to AWS S3, you can follow the steps below **Step 1:** Create AWS S3 account @@ -124,4 +235,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/spreadsheet/docker-deployment.md b/ej2-asp-core-mvc/spreadsheet/docker-deployment.md new file mode 100644 index 0000000000..b50db70b81 --- /dev/null +++ b/ej2-asp-core-mvc/spreadsheet/docker-deployment.md @@ -0,0 +1,116 @@ +--- +layout: post +title: Docker image deployment in ##Platform_Name## Spreadsheet control | Syncfusion +description: Learn here all about Docker image deployment in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Docker deployment +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Docker Image Overview in ##Platform_Name## Spreadsheet control + +The [**Syncfusion Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/aspnet-mvc-ui-controls/spreadsheet) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents. + +This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet backend functionalities. This server-side Web API project targets ASP.NET Core 6.0. + +You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker). + +The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms. + +## Prerequisites + +Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment: + +* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). +* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/). + +## How to deploy the Spreadsheet Docker Image + +**Step 1:** Pull the spreadsheet-server image from Docker Hub. + +```console +docker pull syncfusion/spreadsheet-server +``` + +**Step 2:** Create the `docker-compose.yml` file with the following code in your file system. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + ports: + - "6002:80" +``` + +**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file. + +**Step 3:** In a terminal tab, navigate to the directory where you've placed the `docker-compose.yml` file and execute the following: + +```console +docker-compose up +``` + +Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`. + +{% if page.publishingplatform == "aspnet-core" %} + +**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet control. For more information on how to get started with the Spreadsheet control, refer to this [`getting started page.`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/getting-started-core) + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet control. For more information on how to get started with the Spreadsheet control, refer to this [`getting started page.`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/getting-started-mvc) + +{% endif %} + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} + +@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("http://localhost:6002/api/spreadsheet/open").AllowOpen(true).SaveUrl("http://localhost:6002/api/spreadsheet/save").AllowSave(true).Render() + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## How to configure different cultures using a Docker compose file + +By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + # Specify the culture to configure for the Spreadsheet server + LC_ALL: de_DE.UTF-8 + LANGUAGE: de_DE.UTF-8 + LANG: de_DE.UTF-8 + ports: + - "6002:80" +``` + +Please refer to these getting started pages to create a Spreadsheet in [`Angular`](https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started), [`React`](https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started), [`Vue`](https://ej2.syncfusion.com/vue/documentation/spreadsheet/getting-started), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/getting-started-core), and [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/getting-started-mvc). \ No newline at end of file diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md index 763b1534df..2363d0b204 100644 --- a/ej2-asp-core-mvc/spreadsheet/open-save.md +++ b/ej2-asp-core-mvc/spreadsheet/open-save.md @@ -115,6 +115,81 @@ You can achieve to access the remote excel file by using the [`created`](https:/ {% endtabs %} {% endif %} +### Open an excel file from blob data + +By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the `open` method in the Spreadsheet control to load that `File` object. + +Please find the code to fetch the blob data and load it into the Spreadsheet control below. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/open-from-blob/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/open-from-blob/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/open-from-blob/razor %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/open-from-blob/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Open an Excel file located on a server + +By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the `openFromJson` method to load that `JSON data` into the Spreadsheet control. + +```csharp + public IActionResult Open([FromBody] FileOptions options) + { + OpenRequest open = new OpenRequest(); + string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx"; + // Getting the file stream from the file path. + FileStream fileStream = new FileStream(filePath, FileMode.Open); + // Converting "MemoryStream" to "IFormFile". + IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); + open.File = formFile; + // Processing the Excel file and return the workbook JSON. + var result = Workbook.Open(open); + fileStream.Close(); + return Content(result); + } + + public class FileOptions + { + public string FileName { get; set; } = string.Empty; + } +``` + +```js + + // Fetch call to server to load the Excel file. + fetch('Home/Open', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ FileName: 'Sample' }), + }) + .then((response) => response.json()) + .then((data) => { + // Load the JSON data into spreadsheet. + spreadsheet.openFromJson({ file: data }); + }) + +``` + +You can find the server endpoint code to fetch and process the Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). + ### Open an excel file using a hosted web service in AWS Lambda Before proceeding with the opening process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation. @@ -127,7 +202,9 @@ The following code example shows how to open an Excel file using a hosted web se {% if page.publishingplatform == "aspnet-core" %} -``` +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + @@ -175,11 +252,15 @@ The following code example shows how to open an Excel file using a hosted web se }; -``` + +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} -``` +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} + @Html.EJS().Spreadsheet("spreadsheet").OpenUrl("https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open").AllowOpen(true).BeforeOpen("beforeOpen").Render() -``` + +{% endhighlight %} +{% endtabs %} {% endif %} @@ -359,82 +442,7 @@ You can add your own custom header to the open action in the Spreadsheet. For pr {% include code-snippet/spreadsheet/open-header/opencontroller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - -### To open an excel file from blob data - -By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the `open` method in the Spreadsheet control to load that `File` object. - -Please find the code to fetch the blob data and load it into the Spreadsheet control below. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/open-from-blob/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="OpenController.cs" %} -{% include code-snippet/spreadsheet/open-from-blob/opencontroller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/open-from-blob/razor %} -{% endhighlight %} -{% highlight c# tabtitle="OpenController.cs" %} -{% include code-snippet/spreadsheet/open-from-blob/opencontroller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -### To open an Excel file located on a server - -By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the `openFromJson` method to load that `JSON data` into the Spreadsheet control. - -```csharp - public IActionResult Open([FromBody] FileOptions options) - { - OpenRequest open = new OpenRequest(); - string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx"; - // Getting the file stream from the file path. - FileStream fileStream = new FileStream(filePath, FileMode.Open); - // Converting "MemoryStream" to "IFormFile". - IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); - open.File = formFile; - // Processing the Excel file and return the workbook JSON. - var result = Workbook.Open(open); - fileStream.Close(); - return Content(result); - } - - public class FileOptions - { - public string FileName { get; set; } = string.Empty; - } -``` - -```js - - // Fetch call to server to load the Excel file. - fetch('Home/Open', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ FileName: 'Sample' }), - }) - .then((response) => response.json()) - .then((data) => { - // Load the JSON data into spreadsheet. - spreadsheet.openFromJson({ file: data }); - }) - -``` - -You can find the server endpoint code to fetch and process the Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). +{% endif %} ### External workbook confirmation dialog @@ -515,6 +523,93 @@ N> * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file
* The default value of [allowSave](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSave) property in previous code snippet.
* Demo purpose only, we have used the online web service url link. +### Save an excel file as blob data + +By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the `beforeSave` event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the `saveComplete` event. You can then post the blob data to the server endpoint for saving. + +Please find below the code to retrieve blob data from the Spreadsheet control below. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/save-as-blob/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="SaveController.cs" %} +{% include code-snippet/spreadsheet/save-as-blob/savecontroller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/save-as-blob/razor %} +{% endhighlight %} +{% highlight c# tabtitle="SaveController.cs" %} +{% include code-snippet/spreadsheet/save-as-blob/savecontroller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +### Save an Excel file to a server + +By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the `saveAsJson` method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. + +```js + + // Convert the spreadsheet workbook to JSON data. + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + formData.append('FileName', "Sample"); + formData.append('saveType', 'Xlsx'); + // Passing the JSON data to perform the save operation. + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); + formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false })); + // Using fetch to invoke the save process. + fetch('Home/Save', { + method: 'POST', + body: formData + }).then((response) => { + console.log(response); + }); + }); + +``` + +```csharp + + public string Save(SaveSettings saveSettings) + { + ExcelEngine excelEngine = new ExcelEngine(); + IApplication application = excelEngine.Excel; + try + { + + // Save the workbook as stream. + Stream fileStream = Workbook.Save(saveSettings); + // Using XLSIO, we are opening the file stream and saving the file in the server under "Files" folder. + // You can also save the stream file in your server location. + IWorkbook workbook = application.Workbooks.Open(fileStream); + string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; + var file = System.IO.File.Create(basePath); + fileStream.Seek(0, SeekOrigin.Begin); + // To convert the stream to file options. + fileStream.CopyTo(file); + file.Dispose(); + fileStream.Dispose(); + return string.Empty; + } + catch (Exception ex) + { + return ex.Message; + } + } + +``` + +You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). + ### Save an excel file using a hosted web service in AWS Lambda Before proceeding with the save process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation. @@ -530,8 +625,7 @@ The following code example shows how to save an Excel file using a hosted web se {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -``` - + @@ -592,7 +686,6 @@ The following code example shows how to save an Excel file using a hosted web se }); }; -``` {% endhighlight %} {% endtabs %} @@ -602,7 +695,6 @@ The following code example shows how to save an Excel file using a hosted web se {% tabs %} {% highlight razor tabtitle="CSHTML" %} -``` @Html.EJS().Spreadsheet("spreadsheet").SaveUrl("https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save").AllowSave(true).BeforeSave("beforeSave").Render() -``` {% endhighlight %} - {% endtabs %} + {% endif %} ### Save data as a Base64 string @@ -835,93 +926,6 @@ The possible values are: {% endtabs %} {% endif %} -### To save an excel file as blob data - -By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the `beforeSave` event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the `saveComplete` event. You can then post the blob data to the server endpoint for saving. - -Please find below the code to retrieve blob data from the Spreadsheet control below. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/save-as-blob/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="SaveController.cs" %} -{% include code-snippet/spreadsheet/save-as-blob/savecontroller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/save-as-blob/razor %} -{% endhighlight %} -{% highlight c# tabtitle="SaveController.cs" %} -{% include code-snippet/spreadsheet/save-as-blob/savecontroller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -### To save an Excel file to a server location - -By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the `saveAsJson` method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. - -```js - - // Convert the spreadsheet workbook to JSON data. - spreadsheet.saveAsJson().then((json) => { - const formData = new FormData(); - formData.append('FileName', "Sample"); - formData.append('saveType', 'Xlsx'); - // Passing the JSON data to perform the save operation. - formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); - formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false })); - // Using fetch to invoke the save process. - fetch('Home/Save', { - method: 'POST', - body: formData - }).then((response) => { - console.log(response); - }); - }); - -``` - -```csharp - - public string Save(SaveSettings saveSettings) - { - ExcelEngine excelEngine = new ExcelEngine(); - IApplication application = excelEngine.Excel; - try - { - - // Save the workbook as stream. - Stream fileStream = Workbook.Save(saveSettings); - // Using XLSIO, we are opening the file stream and saving the file in the server under "Files" folder. - // You can also save the stream file in your server location. - IWorkbook workbook = application.Workbooks.Open(fileStream); - string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; - var file = System.IO.File.Create(basePath); - fileStream.Seek(0, SeekOrigin.Begin); - // To convert the stream to file options. - fileStream.CopyTo(file); - file.Dispose(); - fileStream.Dispose(); - return string.Empty; - } - catch (Exception ex) - { - return ex.Message; - } - } - -``` - -You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). - ### Supported file formats The following list of Excel file formats are supported in Spreadsheet: @@ -959,6 +963,7 @@ To save the Spreadsheet document as an `xlsx, xls, csv, or pdf` file, by using ` {% endif %} + ## Server Configuration In Spreadsheet component, import and export operation processed in `server-side`, to use importing and exporting in your projects, it is required to create a server with any of the following web services. @@ -985,3 +990,4 @@ Open and save helper functions are shipped in the Syncfusion.EJ2.Spreadsheet pac * [Filtering](filter) * [Sorting](sort) * [Hyperlink](link) +* [Docker Image](./docker-deployment) \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index b7cd28fc50..ed5d7905bd 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -411,6 +411,11 @@
  • Navigators and Indicators
  • Accessibility
  • Styles and Appearances
    • +
  • How To + +
  • API Reference
    • @@ -2490,6 +2495,7 @@
  • Overview
  • Getting Started
  • Open and Save
    • +
  • Docker Deployment
  • Worksheet
  • Cell Range
  • Editing
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 26e4e18f5a..fba0d0e851 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -363,6 +363,11 @@
  • Navigators and Indicators
  • Accessibility
  • Styles and Appearances
    • +
  • How To + +
  • API Reference
    • @@ -2453,6 +2458,7 @@
  • Overview
  • Getting Started
  • Open and Save
    • +
  • Docker Deployment
  • Worksheet
  • Cell Range
  • Editing