Skip to content

Commit af085e9

Browse files
Karan-SF4772Karan-SF4772
committed
Added Open and save WASM Standalone sample
1 parent 8af1e7b commit af085e9

File tree

23 files changed

+668
-0
lines changed

23 files changed

+668
-0
lines changed

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.14.36518.9 d17.14
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Open-and-save-Word-document", "Open-and-save-Word-document\Open-and-save-Word-document.csproj", "{89974B8E-4554-40DD-855C-5DAB6E0AB116}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{89974B8E-4554-40DD-855C-5DAB6E0AB116}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{89974B8E-4554-40DD-855C-5DAB6E0AB116}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{89974B8E-4554-40DD-855C-5DAB6E0AB116}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{89974B8E-4554-40DD-855C-5DAB6E0AB116}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {A62AA0D3-1023-44BE-AE80-35AA76FFD288}
24+
EndGlobalSection
25+
EndGlobal

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/App.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Router AppAssembly="@typeof(App).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
</Found>
6+
<NotFound>
7+
<PageTitle>Not found</PageTitle>
8+
<LayoutView Layout="@typeof(MainLayout)">
9+
<p role="alert">Sorry, there's nothing at this address.</p>
10+
</LayoutView>
11+
</NotFound>
12+
</Router>

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/FileUtils.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using Microsoft.JSInterop;
2+
using System;
3+
using System.Collections.Generic;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
7+
namespace Open_and_save_Word_document
8+
{
9+
public static class FileUtils
10+
{
11+
public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
12+
=> js.InvokeAsync<object>(
13+
"saveAsFile",
14+
filename,
15+
Convert.ToBase64String(data));
16+
}
17+
}

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/Layout/MainLayout.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@inherits LayoutComponentBase
2+
<div class="page">
3+
<div class="sidebar">
4+
<NavMenu />
5+
</div>
6+
7+
<main>
8+
<div class="top-row px-4">
9+
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
10+
</div>
11+
12+
<article class="content px-4">
13+
@Body
14+
</article>
15+
</main>
16+
</div>

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/Layout/MainLayout.razor.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.page {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
main {
8+
flex: 1;
9+
}
10+
11+
.sidebar {
12+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13+
}
14+
15+
.top-row {
16+
background-color: #f7f7f7;
17+
border-bottom: 1px solid #d6d5d5;
18+
justify-content: flex-end;
19+
height: 3.5rem;
20+
display: flex;
21+
align-items: center;
22+
}
23+
24+
.top-row ::deep a, .top-row ::deep .btn-link {
25+
white-space: nowrap;
26+
margin-left: 1.5rem;
27+
text-decoration: none;
28+
}
29+
30+
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31+
text-decoration: underline;
32+
}
33+
34+
.top-row ::deep a:first-child {
35+
overflow: hidden;
36+
text-overflow: ellipsis;
37+
}
38+
39+
@media (max-width: 640.98px) {
40+
.top-row {
41+
justify-content: space-between;
42+
}
43+
44+
.top-row ::deep a, .top-row ::deep .btn-link {
45+
margin-left: 0;
46+
}
47+
}
48+
49+
@media (min-width: 641px) {
50+
.page {
51+
flex-direction: row;
52+
}
53+
54+
.sidebar {
55+
width: 250px;
56+
height: 100vh;
57+
position: sticky;
58+
top: 0;
59+
}
60+
61+
.top-row {
62+
position: sticky;
63+
top: 0;
64+
z-index: 1;
65+
}
66+
67+
.top-row.auth ::deep a:first-child {
68+
flex: 1;
69+
text-align: right;
70+
width: 0;
71+
}
72+
73+
.top-row, article {
74+
padding-left: 2rem !important;
75+
padding-right: 1.5rem !important;
76+
}
77+
}

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/Layout/NavMenu.razor‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<div class="top-row ps-3 navbar navbar-dark">
2+
<div class="container-fluid">
3+
<a class="navbar-brand" href="">Open-and-save-Word-document</a>
4+
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
5+
<span class="navbar-toggler-icon"></span>
6+
</button>
7+
</div>
8+
</div>
9+
10+
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
11+
<nav class="flex-column">
12+
<div class="nav-item px-3">
13+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
14+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
15+
</NavLink>
16+
</div>
17+
<div class="nav-item px-3">
18+
<NavLink class="nav-link" href="counter">
19+
<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
20+
</NavLink>
21+
</div>
22+
<div class="nav-item px-3">
23+
<NavLink class="nav-link" href="weather">
24+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
25+
</NavLink>
26+
</div>
27+
<div class="nav-item px-3">
28+
<NavLink class="nav-link" href="docio">
29+
<span class="oi oi-list-rich" aria-hidden="true"></span> Create Word
30+
</NavLink>
31+
</div>
32+
</nav>
33+
</div>
34+
35+
@code {
36+
private bool collapseNavMenu = true;
37+
38+
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
39+
40+
private void ToggleNavMenu()
41+
{
42+
collapseNavMenu = !collapseNavMenu;
43+
}
44+
}

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/Layout/NavMenu.razor.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.navbar-toggler {
2+
background-color: rgba(255, 255, 255, 0.1);
3+
}
4+
5+
.top-row {
6+
height: 3.5rem;
7+
background-color: rgba(0,0,0,0.4);
8+
}
9+
10+
.navbar-brand {
11+
font-size: 1.1rem;
12+
}
13+
14+
.bi {
15+
display: inline-block;
16+
position: relative;
17+
width: 1.25rem;
18+
height: 1.25rem;
19+
margin-right: 0.75rem;
20+
top: -1px;
21+
background-size: cover;
22+
}
23+
24+
.bi-house-door-fill-nav-menu {
25+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
26+
}
27+
28+
.bi-plus-square-fill-nav-menu {
29+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
30+
}
31+
32+
.bi-list-nested-nav-menu {
33+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
34+
}
35+
36+
.nav-item {
37+
font-size: 0.9rem;
38+
padding-bottom: 0.5rem;
39+
}
40+
41+
.nav-item:first-of-type {
42+
padding-top: 1rem;
43+
}
44+
45+
.nav-item:last-of-type {
46+
padding-bottom: 1rem;
47+
}
48+
49+
.nav-item ::deep a {
50+
color: #d7d7d7;
51+
border-radius: 4px;
52+
height: 3rem;
53+
display: flex;
54+
align-items: center;
55+
line-height: 3rem;
56+
}
57+
58+
.nav-item ::deep a.active {
59+
background-color: rgba(255,255,255,0.37);
60+
color: white;
61+
}
62+
63+
.nav-item ::deep a:hover {
64+
background-color: rgba(255,255,255,0.1);
65+
color: white;
66+
}
67+
68+
@media (min-width: 641px) {
69+
.navbar-toggler {
70+
display: none;
71+
}
72+
73+
.collapse {
74+
/* Never collapse the sidebar for wide screens */
75+
display: block;
76+
}
77+
78+
.nav-scrollable {
79+
/* Allow sidebar to scroll for tall menus */
80+
height: calc(100vh - 3.5rem);
81+
overflow-y: auto;
82+
}
83+
}

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/Open-and-save-Word-document.csproj‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net8.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.20" />
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.20" PrivateAssets="all" />
12+
<PackageReference Include="Syncfusion.DocIO.Net.Core" Version="*" />
13+
</ItemGroup>
14+
15+
</Project>

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/Pages/Counter.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@page "/counter"
2+
3+
<PageTitle>Counter</PageTitle>
4+
5+
<h1>Counter</h1>
6+
7+
<p role="status">Current count: @currentCount</p>
8+
9+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
10+
11+
@code {
12+
private int currentCount = 0;
13+
14+
private void IncrementCount()
15+
{
16+
currentCount++;
17+
}
18+
}

‎Read-and-Save-document/Open-and-save-Word-document/Blazor/Blazor-WASM-Standalone-app/Open-and-save-Word-document/Pages/DocIO.razor‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@page "/DocIO"
2+
@inject Microsoft.JSInterop.IJSRuntime JS
3+
@inject HttpClient client
4+
@using Syncfusion.DocIO
5+
@using Syncfusion.DocIO.DLS
6+
7+
<h2>Syncfusion DocIO library (DocIO)</h2>
8+
<p>Syncfusion Blazor DocIO library (DocIO) used to create, read, edit, and convert DocIO files in your applications without Microsoft Office dependencies.</p>
9+
<button class="btn btn-primary" @onclick="@OpenAndSaveDocument">Open and save Document</button>
10+
11+
@code {
12+
@functions {
13+
14+
async void OpenAndSaveDocument()
15+
{
16+
using (Stream inputStream = await client.GetStreamAsync("sample-data/Input.docx"))
17+
{
18+
//Open an existing Word document.
19+
using (WordDocument document = new WordDocument(inputStream, FormatType.Docx))
20+
{
21+
//Access the section in a Word document.
22+
IWSection section = document.Sections[0];
23+
//Add new paragraph to the section.
24+
IWParagraph paragraph = section.AddParagraph();
25+
paragraph.ParagraphFormat.FirstLineIndent = 36;
26+
paragraph.BreakCharacterFormat.FontSize = 12f;
27+
//Add new text to the paragraph.
28+
IWTextRange textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as IWTextRange;
29+
textRange.CharacterFormat.FontSize = 12f;
30+
31+
//Save the Word document to MemoryStream.
32+
using (MemoryStream stream = new MemoryStream())
33+
{
34+
document.Save(stream, FormatType.Docx);
35+
stream.Position = 0;
36+
//Download the Word document in the browser.
37+
await JS.SaveAs("Sample.docx", stream.ToArray());
38+
}
39+
}
40+
}
41+
}
42+
}
43+
}

0 commit comments

Comments
 (0)