Skip to content

DOCINFRA-2341_merged_using_automation #583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 5, 2024
Merged

DOCINFRA-2341_merged_using_automation #583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ej2-angular-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2944,7 +2944,7 @@
</ul>
</li> <li>Release Notes
<ul>
<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-angular/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-angular/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-angular/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-angular/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-angular/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-angular/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-angular/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-angular/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-angular/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-angular/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-angular/release-notes/24.1.43">24.1.43</a></li></ul></li> <li><a href="/ej2-angular/release-notes/24.2.3">24.2.3 Service Pack Release</a></li>
<li><a href="/ej2-angular/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-angular/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-angular/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-angular/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-angular/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-angular/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-angular/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-angular/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-angular/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-angular/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-angular/release-notes/23.1.38">23.1.38</a></li></ul></li>
Expand Down
16 changes: 16 additions & 0 deletions ej2-angular/Release-notes/26.2.8.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
title: Essential Studio for Angular Weekly Release Release Notes
description: Essential Studio for Angular Weekly Release Release Notes
platform: ej2-angular
documentation: ug
---

# Essential Studio for Angular Release Notes

{% include release-info.html date="August 06, 2024" version="v26.2.8" %}

{% directory path: _includes/release-notes/v26.2.8 %}

{% include {{file.url}} %}

{% enddirectory %}
70 changes: 69 additions & 1 deletion ej2-angular/pdfviewer/open-pdf-file/from-amazon-s3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,74 @@ domainurl: ##DomainURL##

# 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 a PDF Viewer sample in Angular

Follow the instructions provided in this [link](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in Angular. This will set up the basic structure of your PDF Viewer application.

**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project

1. Import the required namespaces at the top of the file:

```typescript
import * as AWS from 'aws-sdk';
```

2. 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.

```typescript
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
});
```

3. 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 strikng 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.

```typescript
private s3 = new AWS.S3();

loadDocument() {
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 = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
setTimeout(() => {
viewer.load("data:application/pdf;base64,"+base64String);
}, 2000);
}
}
});
}
```

N> The **npm install aws-sdk** 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 a Simple PDF Viewer Sample in Angular
Expand Down Expand Up @@ -151,4 +219,4 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,

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)
[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)
61 changes: 59 additions & 2 deletions ej2-angular/pdfviewer/open-pdf-file/from-dropbox-cloud-file-storage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Open PDF files from Dropbox cloud file storage in Angular Pdfviewer Component | Syncfusion
title: Open PDF from Dropbox cloud storage in Angular PdfViewer | Syncfusion
description: Learn here all about how to Open PDF files from Dropbox cloud file storage in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
platform: ej2-angular
control: Open PDF files from Dropbox cloud file storage
Expand All @@ -10,6 +10,63 @@ domainurl: ##DomainURL##

# Open PDF file from Dropbox cloud file storage

PDF Viewer allows to load PDF file from Drop Box using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Drop Box.

## Using Standalone PDF Viewer

To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below

**Step 1** Create a Dropbox API

To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.

**Step 2:** Create a Simple PDF Viewer Sample in Angular

Start by following the steps provided in this [link](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in Angular. This will give you a basic setup of the PDF viewer component.

**Step 3:** Modify the `src/app/app.component.ts` File in the Angular Project

1. Import the required namespaces at the top of the file:

```typescript
import { Dropbox } from 'dropbox';
```

2. Create an instance of the Dropbox class using an access token for authentication. Next, call the filesDownload method of this Dropbox instance to download the file located at /PDF_Succinctly.pdf. Upon successfully downloading the file, extract the file blob from the response. Convert this file blob to a Base64 string using the blobToBase64 method. Finally, load the Base64 string into a PDF viewer control.

N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.

```typescript
async loadPdfDocument(): Promise<void> {
let proxy = this;
let dbx = new Dropbox({ accessToken: 'Your Access Token' });
dbx.filesDownload({ path: '/PDF_Succinctly.pdf' }).then(async (response) => {
const blob = await (response.result as any).fileBlob;
const base64String = await this.blobToBase64(blob);
setTimeout(() => {
this.pdfviewerControl.load(base64String, "");
}, 2000);
});
}

private blobToBase64(blob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result as string);
};
reader.readAsDataURL(blob);
});
}
```

N> The **npm install dropbox** 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-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone)

## Using Server-Backed PDF Viewer

To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below

**Step 1** Create a Dropbox API
Expand Down Expand Up @@ -151,4 +208,4 @@ N> The **Dropbox.Api** NuGet package must be installed in your application to us

N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Dropbox cloud file storage. Make sure to pass the document name from the dropbox folder to the `documentPath` property of the PDF viewer component

[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage)
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Server-Backed)
112 changes: 111 additions & 1 deletion ej2-angular/pdfviewer/save-pdf-file/to-amazon-s3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,116 @@ domainurl: ##DomainURL##

# 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 a 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 a PDF Viewer sample in Angular

Follow the instructions provided in this [link](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in Angular. This will set up the basic structure of your PDF Viewer application.

**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project

1. Import the required namespaces at the top of the file:

```typescript
import * as AWS from 'aws-sdk';
```

2. 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.

```typescript
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
});
```

3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.

```typescript
@Component({
selector: 'app-root',
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[resourceUrl]='resource'
[toolbarSettings]="toolbarSettings"
(toolbarClick)="toolbarClick($event)"
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})

export class AppComponent implements OnInit {
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";

public toolItem1: CustomToolbarItemModel = {
prefixIcon: 'e-icons e-pv-download-document-icon',
id: 'download_pdf',
tooltipText: 'Download file',
align: 'right'
};

public toolbarSettings = {
showTooltip: true,
toolbarItems: ['OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', this.toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
};

public toolbarClick(args: any): void {
if (args.item && args.item.id === 'download_pdf') {
this.SavePdfToBlob();
}
}
}
```

4. 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.

```typescript
private s3 = new AWS.S3();

saveDocument() {
var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
viewer.saveAsBlob().then((value: Blob) => {
const reader = new FileReader();
reader.onload = () => {
const uint8Array = new Uint8Array(reader.result as ArrayBuffer);
const putObjectParams = {
Bucket: '**Your Bucket Name**',
Key: '**Your Key**',
Body: uint8Array,
ContentType: 'application/pdf',
};
this.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 **npm install aws-sdk** 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 a PDF Viewer sample in Angular
Expand Down Expand Up @@ -140,4 +250,4 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,

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)
[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)
Loading