Skip to content
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

931453: How to reference resource URL locally in the PDF Viewer without using CDN links? #3887

Merged
merged 2 commits into from
Feb 19, 2025
Merged

931453: How to reference resource URL locally in the PDF Viewer without using CDN links? #3887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c70c6f
931453: How to reference resource URL locally in the PDF Viewer witho…
Uma-SF4267 Feb 13, 2025
bad3dbd
Merge branch 'hotfix/hotfix-v28.1.33' into EJ2-931453-hotfix
Uma-SF4267 Feb 13, 2025
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
55 changes: 54 additions & 1 deletion ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,30 @@ Add the required scripts using CDN inside the `<head>` of `~/Views/Shared/_Layou
{% endhighlight %}
{% endtabs %}

N> While referring the scripts from the downloaded resources in your application, make sure to place the 'ej2-pdfviewer-lib' assets in the same directory as the 'ej2.min.js' script.
### Steps to Load PDF Viewer with Local script and style

To use local resources with your PDF Viewer, follow these steps:

**Step 1:** Place the `ej2.min.js` script and its related styles in `ej2` directory within the `Content` folder of your ASP.NET MVC application.

**Step 2:** Insert the necessary script and style references within the `<head>` section of your _Layout.cshtml file. Make sure these point to your local copies of the files instead of CDN links.

By following these steps, you will configure your PDF Viewer to load the required script and style locally. See the code snippet below for reference.

{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}

<head>
...
<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="~/Content/ej2/material.min.css" />
...
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="~/Content/ej2/ej2.min.js"></script>
</head>

{% endhighlight %}
{% endtabs %}

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Script Manager

Expand Down Expand Up @@ -120,6 +143,36 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC PDF Viewer

[DocumentPath](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DocumentPath) is the property needed to load a PDF file in the PDF Viewer.

### How to Configure PDF Viewer to Use Local Resources

To utilize the `resourceUrl` and `documentPath` locally with your PDF Viewer, follow these instructions:

**Step 1:** Ensure that your application includes the `ej2-pdfviewer-lib` folder. This folder must contain the `pdfium.js`, `pdfium.wasm` files, and the PDF file that you intend to display. These should be located in the `Content` folder within your project.

**Step 2:** Assign local file paths to the `documentPath` and `resourceUrl` properties within the PDF Viewer setup. The `documentPath` should refer to your PDF file, while the `resourceUrl` should point to the directory containing the supporting resources.

By following these steps, you will configure your PDF Viewer to load the required resources locally. See the code snippet below for reference.

{% tabs %}
{% highlight c# tabtitle="~/Index.cshtml" %}

@{
ViewBag.Title = "Home Page";
var originUrl = $"{Request.Url.Scheme}://{Request.Url.Authority}";
var document = originUrl + "/Content/pdfsuccinctly.pdf";
var resourceUrl = originUrl + "/Content/ej2-pdfviewer-lib";
}

<div style="height: 900px;width:100%;">
@Html.EJS().PdfViewer("pdfviewer").ResourceUrl(@resourceUrl).DocumentPath(@document).Render()

</div>

{% endhighlight %}
{% endtabs %}

View the sample in GitHub to [load PDF Viewer with local resources](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally/PdfViewer_MVC)

Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC PDF Viewer control will be rendered in the default web browser.

![ASP.NET MVC PDF Viewer Control](AspNetMVC_Images/pdfviewer-control.png)
Expand Down
56 changes: 55 additions & 1 deletion ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,29 @@ Add the required scripts using CDN inside the `<head>` of `~/Pages/Shared/_Layou
{% endhighlight %}
{% endtabs %}

N> While referring the scripts from the downloaded resources in your application, make sure to place the 'ej2-pdfviewer-lib' assets in the same directory as the 'ej2.min.js' script.
### Steps to Load PDF Viewer with Local script and style

To use local resources with your PDF Viewer, follow these steps:

**Step 1:** Place the `ej2.min.js` script and its related styles in `wwwroot` folder of your ASP.NET Core application.

**Step 2:** Insert the necessary script and style references within the `<head>` section of your _Layout.cshtml file. Make sure these point to your local copies of the files instead of CDN links.

By following these steps, you will configure your PDF Viewer to load the required script and style locally. See the code snippet below for reference.

{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}

<head>
...
<!-- Syncfusion ASP.NET Core controls styles -->
<link rel="stylesheet" href="~/material.min.css" />
<!-- Syncfusion ASP.NET Core controls scripts -->
<script src="~/ej2.min.js"></script>
</head>

{% endhighlight %}
{% endtabs %}

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Script Manager

Expand Down Expand Up @@ -128,6 +150,38 @@ In the above code,

**documentPath** is the property needed to load a PDF file in the PDF Viewer.

### How to Configure PDF Viewer to Use Local Resources

To utilize the `resourceUrl` and `documentPath` locally with your PDF Viewer, follow these instructions:

**Step 1:** Ensure that your application includes the `ej2-pdfviewer-lib` folder. This folder must contain the `pdfium.js`, `pdfium.wasm` files, and the PDF file that you intend to display. These should reside in the same location as the `ej2.min.js` script and its related styles.

**Step 2:** Assign local file paths to the `documentPath` and `resourceUrl` properties within the PDF Viewer setup. The `documentPath` should refer to your PDF file, while the `resourceUrl` should point to the directory containing the supporting resources.

By following these steps, you will configure your PDF Viewer to load the required resources locally. See the code snippet below for reference.

{% tabs %}
{% highlight c# tabtitle="~/Index.cshtml" %}

@page "{handler?}"
@model IndexModel
@{
ViewData["Title"] = "Home page";
var originUrl = $"{Request.Scheme}://{Request.Host}{Request.PathBase}";
var document = originUrl + "/PDF_Succinctly.pdf";
var resourceUrl = originUrl + "/ej2-pdfviewer-lib";
}

<div>
<ejs-pdfviewer id="pdfviewer" style="height:600px" documentPath=@document resourceUrl=@resourceUrl>
</ejs-pdfviewer>
</div>

{% endhighlight %}
{% endtabs %}

View the sample in GitHub to [load PDF Viewer with local resources](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally)

Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core PDF Viewer control will be rendered in the default web browser.

![ASP.NET Core PDF Viewer Control](Core_Images/pdfviewer-control.png)
Expand Down