showing a large pdf file embedded on a browser

Question

showing a large pdf file embedded on a browser

Anjali Agarwal 1,531

I am trying to show a pdf file embedded in my browser window. My code shows a small pdf file on the browser, but it does not show the large pdf file. Below is my code:

Model class:

public class FileModel

{

    public int FileModelId { get; set; }

    public byte[]? FileName { get; set; }

    public string? Url { get; set; }

    public string InlineMarkup

    {

        get

        {

            return String.Format("data:application/pdf;base64,{0}", Convert.ToBase64String(this.FileName));

        }

    }

}

My controller class Index method:

public async Task<IActionResult> Index()

    {

        using (MemoryStream stream = new MemoryStream())

        {

            string filePath = Path.Combine("FilledPDFFiles//Package2022.pdf");

            string filePath2 = Path.Combine(_environment.WebRootPath, "FilledPDFFiles//Package2022.pdf");

            byte[] bytes = System.IO.File.ReadAllBytes(filePath2);

            FileModel profile = new FileModel

            {

                Url = filePath,

                FileName = bytes

            };

            return View(profile);

        }

My razor View:

@model AckPackage.Models.FileModel

Above code works fine if the pdf file is around 373 KB. I am trying to embed a 2330 KB file on the web browser. Is their any way to display large pdf files. Below is my directory structure

User's image

Viorel 122.6K Reputation points

2023-02-09T06:49:39.13+00:00

According to https://learn.microsoft.com/en-us/answers/questions/1167297/embedding-a-pdf-file-in-my-chrome-browser, did you try to use Url = filePath2 in your Index() function, and also src="@Model.Url" in view? And use "/" instead of "//".

Also make sure that the PDF file is valid (can be opened manually).
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-09T08:07:07.3133333+00:00

You can use object data tag and then can bind your stream there finally, use @Html.Raw(TempData["Embed"]) in your view. Let me know if you need further assistance on it.

Anjali Agarwal 1,531

Hi @Farid Uddin Kiron MSFT ,

I can easily open the pdf manually. I tested it twice. per your suggestion, I have the following code in my Index:

public async Task<IActionResult> Index()

    {

        string path = Path.Combine(_environment.WebRootPath, "FilledPDFFiles");

        using (MemoryStream stream = new MemoryStream())

        {

            //System.IO.File.WriteAllBytes(path + "/Package2022.pdf", stream.ToArray());

            string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"1000px\" height=\"600px\">";

            embed += "If you are unable to view file, you can download from <a href = \"{0}\">here</a>";

            embed += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";

            embed += "</object>";

            TempData["Embed"] = string.Format(embed, "/FilledPDFFiles/Package2022.pdf");

            return View();

        }

This is the code in my View:

@Html.Raw(TempData["Embed"])

below is the directory structure:

User's image

This is the error, I am getting in Edge and chrome:

Edge:

User's image

Chrome:

User's image

I also commented this line per your suggestion:

System.IO.File.WriteAllBytes(path + "/Package2022.pdf", stream.ToArray());

Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-09T09:15:45.3166667+00:00

You have configured the browser accordingly and allowed viewPDF option right? Does your program.cs file has the reference of app.UseStaticFiles();? In addition, what are you getting here:
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-09T09:28:20.84+00:00

Also please make sure, your Package2022.pdf files are not 0KB or corrupted, try some different PDF as well.

Anjali Agarwal 1,531

Hi @Farid Uddin Kiron MSFT ,

The only thing that I can think of is that I am missing await operator because my Index is using async. I double checked Package2022.pdf is not corrupted.

yes, below is the screen shot of chrome browser settings:

User's image

Below is the code from startup.cs file configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    {

        if (env.IsDevelopment())

        {

            app.UseDeveloperExceptionPage();

        }

        else

        {

            app.UseExceptionHandler("/Home/Error");

            // The default HSTS value is 30 days.

            app.UseHsts();

        }

        app.UseHttpsRedirection();

        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthentication();

        app.UseAuthorization();

        app.UseSession();

        app.UseEndpoints(endpoints =>

        {

            endpoints.MapControllerRoute(

                name: "default",

                pattern: "{controller=Employee}/{action=Create}/{id?}");

            endpoints.MapRazorPages();

        });

        // app.MapRazorPages();

    }

}

here is the screen shot of TempData["Embed"]:

User's image

below is the scren shot of View data:

User's image

Just noticed though, I am getting an green line underneath Index:

    public async Task<IActionResult> Index()

    {

        string path = Path.Combine(_environment.WebRootPath, "FilledPDFFiles");

        using (MemoryStream stream = new MemoryStream())

        {

            //System.IO.File.WriteAllBytes(path + "/Package2022.pdf", stream.ToArray());

            string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"1000px\" height=\"600px\">";

            embed += "If you are unable to view file, you can download from <a href = \"{0}\">here</a>";

            embed += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";

            embed += "</object>";

            TempData["Embed"] = string.Format(embed, "/FilledPDFFiles/Package2022.pdf");

            return View();

        }


   

    }

When I hovered over Index, It says:

User's image

Not sure where to put await.

Your help is highly appreciated.

Anjali Agarwal 1,531 Reputation points

2023-02-09T21:58:50.5933333+00:00

Hi @Farid Uddin Kiron MSFT ,

Your solution worked! If you post your solution as answer, I will accept it. Thank you for all your help!!
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-10T01:13:43.64+00:00

Thanks for your response, I have posted my answer.

Accepted answer

1 additional answer

Your answer

Viorel 122.6K Reputation points

2023-02-09T06:49:39.13+00:00

According to https://learn.microsoft.com/en-us/answers/questions/1167297/embedding-a-pdf-file-in-my-chrome-browser, did you try to use Url = filePath2 in your Index() function, and also src="@Model.Url" in view? And use "/" instead of "//".

Also make sure that the PDF file is valid (can be opened manually).
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-09T08:07:07.3133333+00:00

You can use object data tag and then can bind your stream there finally, use @Html.Raw(TempData["Embed"]) in your view. Let me know if you need further assistance on it.
Anjali Agarwal 1,531 Reputation points

2023-02-09T08:30:44.96+00:00

Hi @Farid Uddin Kiron MSFT ,

I can easily open the pdf manually. I tested it twice. per your suggestion, I have the following code in my Index:

public async Task<IActionResult> Index()

{ string path = Path.Combine(_environment.WebRootPath, "FilledPDFFiles"); using (MemoryStream stream = new MemoryStream()) { //System.IO.File.WriteAllBytes(path + "/Package2022.pdf", stream.ToArray()); string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"1000px\" height=\"600px\">"; embed += "If you are unable to view file, you can download from <a href = \"{0}\">here</a>"; embed += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file."; embed += "</object>"; TempData["Embed"] = string.Format(embed, "/FilledPDFFiles/Package2022.pdf"); return View(); }

This is the code in my View:

@Html.Raw(TempData["Embed"])

below is the directory structure:

This is the error, I am getting in Edge and chrome:

Edge:

Chrome:

I also commented this line per your suggestion:

System.IO.File.WriteAllBytes(path + "/Package2022.pdf", stream.ToArray());
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-09T09:15:45.3166667+00:00

You have configured the browser accordingly and allowed viewPDF option right? Does your program.cs file has the reference of app.UseStaticFiles();? In addition, what are you getting here:
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-09T09:28:20.84+00:00

Also please make sure, your Package2022.pdf files are not 0KB or corrupted, try some different PDF as well.
Anjali Agarwal 1,531 Reputation points

2023-02-09T09:50:24.32+00:00

Hi @Farid Uddin Kiron MSFT ,

The only thing that I can think of is that I am missing await operator because my Index is using async. I double checked Package2022.pdf is not corrupted.

yes, below is the screen shot of chrome browser settings:

Below is the code from startup.cs file configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{ if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); // The default HSTS value is 30 days. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); app.UseAuthorization(); app.UseSession(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Employee}/{action=Create}/{id?}"); endpoints.MapRazorPages(); }); // app.MapRazorPages(); } }

here is the screen shot of TempData["Embed"]:

below is the scren shot of View data:

Just noticed though, I am getting an green line underneath Index:

public async Task<IActionResult> Index() { string path = Path.Combine(_environment.WebRootPath, "FilledPDFFiles"); using (MemoryStream stream = new MemoryStream()) { //System.IO.File.WriteAllBytes(path + "/Package2022.pdf", stream.ToArray()); string embed = "<object data=\"{0}\" type=\"application/pdf\" width=\"1000px\" height=\"600px\">"; embed += "If you are unable to view file, you can download from <a href = \"{0}\">here</a>"; embed += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file."; embed += "</object>"; TempData["Embed"] = string.Format(embed, "/FilledPDFFiles/Package2022.pdf"); return View(); } }

When I hovered over Index, It says:

Not sure where to put await.

Your help is highly appreciated.
Anjali Agarwal 1,531 Reputation points

2023-02-09T21:58:50.5933333+00:00

Hi @Farid Uddin Kiron MSFT ,

Your solution worked! If you post your solution as answer, I will accept it. Thank you for all your help!!
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-10T01:13:43.64+00:00

Thanks for your response, I have posted my answer.

Answer 1

I am trying to embed a 2330 KB file on the web browser. Is their any way to display large pdf files.

Well, seems you are having issue on displaying large PDF file on browser. Obviously, you can. In fact, the way is much cleaner and efficient no matter how large the pdf is. I have checked with up to 10,000 KB size. Here is the implementation below:

Embed Large PDF:

Controller:

public IActionResult DisplayLargePdf()

            {

               

                    using (MemoryStream stream = new MemoryStream())

                {

    

    
                    string embed = "<object data="{0}" type="application/pdf" width="1000px" height="600px">";

                    embed += "If you are unable to view file, you can download from 

                    embed += " or download 

                    embed += "</object>";

    

                    TempData["Embed"] = string.Format(embed, "/YourFolderName/YourFileName.pdf");

                    return View();

                }

    

            }

View:


    @Html.Raw(TempData["Embed"])

Output:

LargePDF

Browser Settings:

If your browser restricts you, in that scenario, you should configure your browser setting. For Edge you can configure as following.

enter image description here

Note:

The key part is <object data> which would display PDF for you. I have tested just google chrome as well and working accordingly.

Anjali Agarwal 1,531 Reputation points

2023-02-10T02:53:40.84+00:00

Thank you!! really appreciate all your help!
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2023-02-10T04:50:21+00:00

Thanks for your response and glad to assist you @Anjali Agarwal

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

with embed, the source url is passed to the adobe reader, but there is a size limit. your approach will not work for large pdf's.

you can download as suggested or switch to a javascript pdf viewer (though you might need to convert the base64 to a blob).

Share via

showing a large pdf file embedded on a browser

1 additional answer

Your answer