You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md
+111Lines changed: 111 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -72,6 +72,117 @@ An Excel file encoded as a Base64 string can be loaded into the Spreadsheet comp
72
72
{% endhighlight %}
73
73
{% endtabs %}
74
74
75
+
### Open an Excel file from Google Drive
76
+
To load an Excel file from `Google Drive` in the Blazor Spreadsheet, follow the steps below.
77
+
78
+
**Prerequisites:**
79
+
-[Google Cloud project](https://developers.google.com/workspace/guides/create-project) in the Google Cloud Console.
80
+
-[Service account](https://cloud.google.com/iam/docs/service-accounts-create) within the GCP project.
81
+
-[Service account key](https://cloud.google.com/iam/docs/keys-create-delete) (JSON) available on disk.
82
+
-[Google Drive API enabled](https://console.cloud.google.com/apis/library/drive.googleapis.com) for the project.
83
+
-[Google Drive account](https://drive.google.com/) with access to the file to download.
84
+
-[Google.Apis.Drive.v3](https://www.nuget.org/packages/Google.Apis.Drive.v3) NuGet package installed in your project to access Google Drive API.
85
+
86
+
**Step 1:** Install required NuGet packages
87
+
88
+
To use Google Drive with the Blazor Spreadsheet, install the following packages:
89
+
90
+
-[Google.Apis.Drive.v3](https://www.nuget.org/packages/Google.Apis.Drive.v3) — to access the Google Drive API
91
+
-[Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) — to use the Syncfusion Blazor Spreadsheet component
92
+
93
+
**Step 2:** Include the following namespaces in the **Index.razor** file
94
+
95
+
Import the required namespaces at the top of the file:
96
+
97
+
```
98
+
@using Google.Apis.Auth.OAuth2;
99
+
@using Google.Apis.Drive.v3;
100
+
@using Google.Apis.Services;
101
+
@using Syncfusion.Blazor.Spreadsheet;
102
+
@using System.IO;
103
+
```
104
+
105
+
**Step 3:** Download the Excel file, convert to bytes, and prepare for binding
106
+
107
+
Add the below code example to download the `Google Drive` file using the Drive API, convert the stream to a byte array, and bind it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DataSource) property.
108
+
109
+
{% tabs %}
110
+
{% highlight razor %}
111
+
112
+
@page "/"
113
+
114
+
@if (IsSpreadsheetDataLoaded)
115
+
{
116
+
<SfSpreadsheetDataSource="DataSourceBytes">
117
+
<SpreadsheetRibbon></SpreadsheetRibbon>
118
+
</SfSpreadsheet>
119
+
}
120
+
@code{
121
+
122
+
public byte[] DataSourceBytes { get; set; }
123
+
124
+
// Flag to indicate whether the spreadsheet data has been loaded and is ready for rendering
DriveService service = new DriveService(new BaseClientService.Initializ()
158
+
{
159
+
HttpClientInitializer = credential
160
+
});
161
+
162
+
//Create a request to get the file from Google Drive
163
+
var request = service.Files.Get(fileID);
164
+
165
+
//Download the file into a MemoryStream
166
+
MemoryStream stream = new MemoryStream();
167
+
await request.DownloadAsync(stream);
168
+
169
+
return stream;
170
+
}
171
+
catch (Exception ex)
172
+
{
173
+
Console.WriteLine($"Error retrieving document from Google Drive: {ex.Message}");
174
+
throw;
175
+
}
176
+
}
177
+
}
178
+
179
+
{% endhighlight %}
180
+
{% endtabs %}
181
+
182
+
N> Replace **Your_file_id** with the actual Google Drive file ID, and **Your_service_account_key_path** with the actual path to your service account key JSON file.
183
+
184
+
N> The **FileID** is the unique identifier for a Google Drive file. For example, if the file URL is: `https://drive.google.com/file/d/abc123xyz456/view?usp=sharing`, then the file ID is `abc123xyz456`.
185
+
75
186
### Supported file formats
76
187
The Spreadsheet component supports opening the following file formats:
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,15 +16,15 @@ This guide explains how to integrate the JavaScript PDF library into an ASP.NET
16
16
17
17
## Integrate PDF library into an ASP.NET Core application
18
18
19
-
1. Start Visual Studio and select **Create a new project**.
20
-
2. In the **Create a new project** dialog, select **ASP.NET Core Web App**.
19
+
Step 1: Start Visual Studio and select **Create a new project**.
20
+
Step 2: In the **Create a new project** dialog, select **ASP.NET Core Web App**.
21
21
22
-
3. In the **Configure your new project** dialog, enter the project name and select **Next**.
22
+
Step 3: In the **Configure your new project** dialog, enter the project name and select **Next**.
23
23
24
-
4. In the **Additional information** dialog, select a .NET LTS version (for example, **.NET 8.0 (Long-term Support)**) and then select **Create**.
24
+
Step 4: In the **Additional information** dialog, select a .NET LTS version (for example, **.NET 8.0 (Long-term Support)**) and then select **Create**.
25
25
26
26
27
-
5.**Add script reference** : Add the required scripts using the CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` as follows:
27
+
Step 5:**Add script reference** : Add the required scripts using the CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` as follows:
28
28
29
29
{% tabs %}
30
30
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -38,7 +38,7 @@ This guide explains how to integrate the JavaScript PDF library into an ASP.NET
38
38
{% endhighlight %}
39
39
{% endtabs %}
40
40
41
-
6.**Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
41
+
Step 6:**Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
42
42
43
43
{% tabs %}
44
44
{% highlight c# tabtitle="~/Index.cshtml" %}
@@ -75,9 +75,9 @@ This guide explains how to integrate the JavaScript PDF library into an ASP.NET
75
75
{% endhighlight %}
76
76
{% endtabs %}
77
77
78
-
7.**Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
78
+
step 7:**Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
79
79
80
-
8.**Run the project** : Click the Start button (green arrow) or press F5 to run the app.
80
+
Step 8:**Run the project** : Click the Start button (green arrow) or press F5 to run the app.
81
81
82
82
By executing the program, you will generate the following PDF document.
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,15 +16,15 @@ This guide explains how to integrate the JavaScript PDF library into an ASP.NET
16
16
17
17
## Integrate PDF library into an ASP.NET MVC application
18
18
19
-
1. Start Visual Studio and select **Create a new project**.
20
-
2. Create a new ASP.NET MVC Web Application project.
19
+
Step 1: Start Visual Studio and select **Create a new project**.
20
+
Step 2: Create a new ASP.NET MVC Web Application project.
21
21
22
-
3. Choose the target framework.
22
+
Step 3: Choose the target framework.
23
23
24
-
4. Select Web Application pattern (MVC) for the project and then select **Create** button.
24
+
Step 4: Select Web Application pattern (MVC) for the project and then select **Create** button.
25
25
26
26
27
-
5.**Add script reference** : Add the required scripts using the CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` as follows:
27
+
Step 5:**Add script reference** : Add the required scripts using the CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` as follows:
28
28
29
29
{% tabs %}
30
30
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -38,7 +38,7 @@ This guide explains how to integrate the JavaScript PDF library into an ASP.NET
38
38
{% endhighlight %}
39
39
{% endtabs %}
40
40
41
-
6.**Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
41
+
Step 6:**Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
42
42
43
43
{% tabs %}
44
44
{% highlight c# tabtitle="~/Index.cshtml" %}
@@ -75,9 +75,9 @@ This guide explains how to integrate the JavaScript PDF library into an ASP.NET
75
75
{% endhighlight %}
76
76
{% endtabs %}
77
77
78
-
7.**Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
78
+
Step 7:**Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
79
79
80
-
8.**Run the project** : Click the Start button (green arrow) or press F5 to run the app.
80
+
Step 8:**Run the project** : Click the Start button (green arrow) or press F5 to run the app.
81
81
82
82
By executing the program, you will generate the following PDF document.
**Step 3:** Create a HTML page (index.html) in `my-app` location and add the CDN link references.
31
+
Step 3: Create a HTML page (index.html) in `my-app` location and add the CDN link references.
32
32
33
33
{% tabs %}
34
34
{% highlight ts tabtitle="index.html" %}
@@ -42,7 +42,7 @@ The Syncfusion<sup>®</sup> JS 2 for JavaScript (global script) is an ES5 for
42
42
{% endhighlight %}
43
43
{% endtabs %}
44
44
45
-
**Step 4:****Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
45
+
Step 4: **Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
0 commit comments