Skip to content

Commit a36be5e

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #3820 from Syncfusion-Content/development
DOCINFRA-2341_merged_using_automation
2 parents fb2325d + fba7beb commit a36be5e

File tree

10 files changed

+349
-0
lines changed

10 files changed

+349
-0
lines changed

‎ej2-asp-core-mvc/Release-notes/28.2.3.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Essential Studio for ##Platform_Name## 2024 Volume 4 SP Release Release Notes
3+
description: Essential Studio for ##Platform_Name## 2024 Volume 4 SP Release Release Notes
4+
platform: ej2-asp-core-mvc
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for ##Platform_Name## Release Notes
9+
10+
{% include release-info.html date="January 29, 2025" version="v28.2.3" %}
11+
12+
{% directory path: _includes/release-notes/v28.2.3 %}
13+
14+
{% include {{file.url}} %}
15+
16+
{% enddirectory %}

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/mobile-toolbar.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
layout: post
3+
title: Mobile Toolbar Interface in ##Platform_Name## Pdfviewer Component| Syncfusion
4+
description: Learn All About the Mobile Toolbar Interface in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Mobile Toolbar Interface
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
# Mobile Toolbar Interface in ASP.NET MVC PDFViewer Control
11+
12+
The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions.
13+
14+
## Mobile Mode Toolbar Configuration
15+
In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode:
16+
17+
![Mobile toolbar with primary PDF interaction options](./images/mobileToolbar.png)
18+
19+
### Main Toolbar Options:
20+
21+
**OpenOption:** Tap to load a PDF document.
22+
23+
**SearchOption:** Access the search bar to find text within the document.
24+
25+
![Search bar displayed for finding text within a PDF](./images/searchOption.png)
26+
27+
**UndoRedoTool:** Quickly undo or redo any annotations made.
28+
29+
**OrganizePagesTool:** Enable or disable page organization features to modify document pages.
30+
31+
![Page organization interface for modifying PDF pages](./images/organizePages.png)
32+
33+
**AnnotationEditTool:** Activate or deactivate annotation editing to add or modify annotations.
34+
35+
![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](./images/editAnnotation.png)
36+
37+
38+
N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer.
39+
40+
### More Options Menu:
41+
42+
When you open the "more options" menu, you will see additional actions such as:
43+
44+
**DownloadOption:** Tap to download the currently opened PDF document.
45+
46+
**BookmarkOption:** Allows you to view bookmarks within the document.
47+
48+
![More options menu showing additional actions like download and bookmark](./images/more-options.png)
49+
50+
## Enabling Desktop Mode in Mobile
51+
52+
The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms.
53+
54+
### Steps to Enable Desktop Mode:
55+
56+
**Step 1:** Set `enableDesktopMode` to true in the API configuration.
57+
58+
**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls.
59+
60+
{% tabs %}
61+
{% highlight html tabtitle="Standalone" %}
62+
63+
<div style="width:100%;height:600px">
64+
@Html.EJS().PdfViewer("pdfviewer").EnableDesktopMode(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
65+
</div>
66+
67+
{% endhighlight %}
68+
{% highlight html tabtitle="Server-Backed" %}
69+
70+
<div style="width:100%;height:600px">
71+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableDesktopMode(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
72+
</div>
73+
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
## Enable Scrolling in Desktop Mode with Touch Gestures
78+
79+
To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `enableTextSelection` option to **false**.
80+
81+
{% tabs %}
82+
{% highlight html tabtitle="Standalone" %}
83+
84+
<div style="width:100%;height:600px">
85+
@Html.EJS().PdfViewer("pdfviewer").EnableDesktopMode(true).EnableTextSelection(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
86+
</div>
87+
88+
{% endhighlight %}
89+
{% highlight html tabtitle="Server-Backed" %}
90+
91+
<div style="width:100%;height:600px">
92+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableDesktopMode(true).EnableTextSelection(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
93+
</div>
94+
95+
{% endhighlight %}
96+
{% endtabs %}
97+
98+
## Print Option Not Available
99+
100+
The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `enableDesktopMode` API.
101+
102+
### How to Use Print on Mobile:
103+
104+
**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device.
105+
106+
**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device.
107+
108+
N> In mobile mode, the print functionality will not be available unless desktop mode is enabled.

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
layout: post
3+
title: Open PDF files in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
4+
description: Learn here all about Opening PDF in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: How to Open PDF From Base64
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Opening a PDF from Base64 data in PDF Viewer
12+
### Overview
13+
14+
This guide demonstrates how to load a PDF document from a Base64 string into the Syncfusion PDF Viewer using ASP.NET MVC. This feature is useful for loading PDF data received from a client, database, or other sources where the document is encoded in Base64.
15+
16+
### Opening PDF from Base64 data
17+
18+
**Step 1:** Set Up the PdfViewer in Your ASP.NET MVC Project
19+
20+
Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
21+
22+
**Step 2:** Use the following code snippet to load PDF document using base64 string.
23+
24+
25+
{% tabs %}
26+
{% highlight html tabtitle="Standalone" %}
27+
28+
@using Syncfusion.EJ2
29+
@{
30+
ViewBag.Title = "Home Page";
31+
}
32+
<div>
33+
<div style="height:500px;width:100%;">
34+
<button type="button" onclick="LoadFromBase64()">:Load From Base64</button>
35+
<!-- Render PDF Viewer using the Html helper method -->
36+
@Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib").Render()
37+
</div>
38+
</div>
39+
40+
<script type="text/javascript">
41+
//Load PDF document from base64 String
42+
function LoadFromBase64() {
43+
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
44+
//Enter Base64 Data
45+
viewer.load('Enter Base64 Data',null);
46+
}
47+
</script>
48+
49+
{% endhighlight %}
50+
{% endtabs %}
51+
52+
[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/mobile-toolbar.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
---
2+
layout: post
3+
title: Mobile Toolbar Interface in ##Platform_Name## Pdfviewer Component| Syncfusion
4+
description: Learn All About the Mobile Toolbar Interface in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Mobile Toolbar Interface
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
# Mobile Toolbar Interface in ASP.NET Core PDF Viewer control
11+
12+
The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions.
13+
14+
## Mobile Mode Toolbar Configuration
15+
In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode:
16+
17+
![Mobile toolbar with primary PDF interaction options](./images/mobileToolbar.png)
18+
19+
### Main Toolbar Options:
20+
21+
**OpenOption:** Tap to load a PDF document.
22+
23+
**SearchOption:** Access the search bar to find text within the document.
24+
25+
![Search bar displayed for finding text within a PDF](./images/searchOption.png)
26+
27+
**UndoRedoTool:** Quickly undo or redo any annotations made.
28+
29+
**OrganizePagesTool:** Enable or disable page organization features to modify document pages.
30+
31+
![Page organization interface for modifying PDF pages](./images/organizePages.png)
32+
33+
**AnnotationEditTool:** Activate or deactivate annotation editing to add or modify annotations.
34+
35+
![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](./images/editAnnotation.png)
36+
37+
38+
N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer.
39+
40+
### More Options Menu:
41+
42+
When you open the "more options" menu, you will see additional actions such as:
43+
44+
**DownloadOption:** Tap to download the currently opened PDF document.
45+
46+
**BookmarkOption:** Allows you to view bookmarks within the document.
47+
48+
![More options menu showing additional actions like download and bookmark](./images/more-options.png)
49+
50+
## Enabling Desktop Mode in Mobile
51+
52+
The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms.
53+
54+
### Steps to Enable Desktop Mode:
55+
56+
**Step 1:** Set `enableDesktopMode` to true in the API configuration.
57+
58+
**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls.
59+
60+
{% tabs %}
61+
{% highlight cshtml tabtitle="Standalone" %}
62+
<div style="width:100%;height:600px">
63+
<ejs-pdfviewer id="pdfviewer"
64+
style="height:600px"
65+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
66+
enableDesktopMode="true">
67+
</ejs-pdfviewer>
68+
</div>
69+
{% endhighlight %}
70+
{% highlight cshtml tabtitle="Server-Backed" %}
71+
<div style="width:100%;height:600px">
72+
<ejs-pdfviewer id="pdfviewer"
73+
style="height:600px"
74+
serviceUrl="/api/PdfViewer"
75+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
76+
enableDesktopMode="true">
77+
</ejs-pdfviewer>
78+
</div>
79+
{% endhighlight %}
80+
{% endtabs %}
81+
82+
## Enable Scrolling in Desktop Mode with Touch Gestures
83+
84+
To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `enableTextSelection` option to **false**.
85+
86+
{% tabs %}
87+
{% highlight cshtml tabtitle="Standalone" %}
88+
<div style="width:100%;height:600px">
89+
<ejs-pdfviewer id="pdfviewer"
90+
style="height:600px"
91+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
92+
enableDesktopMode="true"
93+
enableTextSelection="false">
94+
</ejs-pdfviewer>
95+
</div>
96+
{% endhighlight %}
97+
{% highlight cshtml tabtitle="Server-Backed" %}
98+
<div style="width:100%;height:600px">
99+
<ejs-pdfviewer id="pdfviewer"
100+
style="height:600px"
101+
serviceUrl="/api/PdfViewer"
102+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
103+
enableDesktopMode="true"
104+
enableTextSelection="false">
105+
</ejs-pdfviewer>
106+
</div>
107+
{% endhighlight %}
108+
{% endtabs %}
109+
110+
## Print Option Not Available
111+
112+
The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `enableDesktopMode` API.
113+
114+
### How to Use Print on Mobile:
115+
116+
**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device.
117+
118+
**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device.
119+
120+
N> In mobile mode, the print functionality will not be available unless desktop mode is enabled.

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
layout: post
3+
title: Open PDF files in EJ2 ASP.NET CORE PDF Viewer | Syncfusion
4+
description: Learn here all about Opening PDF in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: PDF Viewer
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Opening a PDF from Base64 data in PDF Viewer
12+
### Overview
13+
14+
This guide demonstrates how to load a PDF document from a Base64 string into the Syncfusion PDF Viewer using ASP.NET CORE. This feature is useful for loading PDF data received from a client, database, or other sources where the document is encoded in Base64.
15+
16+
### Opening PDF from Base64 data
17+
18+
**Step 1:** Set Up the PdfViewer in Your ASP.NET CORE Project
19+
20+
Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
21+
22+
**Step 2:** Use the following code snippet to load PDF document using base64 string.
23+
24+
25+
{% tabs %}
26+
{% highlight html tabtitle="Standalone" %}
27+
28+
@page "{handler?}"
29+
@model IndexModel
30+
@{
31+
ViewData["Title"] = "Home page";
32+
}
33+
34+
<div class="text-center">
35+
<button type="button" id="loadButton">Load PDF from Base64</button>
36+
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
37+
</ejs-pdfviewer>
38+
</div>
39+
40+
<script type="text/javascript">
41+
document.getElementById('loadButton').addEventListener('click', function () {
42+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
43+
//Enter the base 64 Data
44+
var base64String = 'Enter Base64 Data';
45+
// Load the PDF document using the load() method with Base64 string
46+
pdfViewer.load(base64String, null); // Pass null for filename if not required
47+
});
48+
</script>
49+
50+
{% endhighlight %}
51+
{% endtabs %}
52+
53+
[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to)

‎ej2-asp-core-mvc/pdfviewer/images/editAnnotation.png

26.2 KB
Loading

‎ej2-asp-core-mvc/pdfviewer/images/mobileToolbar.png

23.2 KB
Loading

‎ej2-asp-core-mvc/pdfviewer/images/more-options.png

27.2 KB
Loading

‎ej2-asp-core-mvc/pdfviewer/images/organizePages.png

35.3 KB
Loading

‎ej2-asp-core-mvc/pdfviewer/images/searchOption.png

23.8 KB
Loading

0 commit comments

Comments
 (0)