How to Display Pdf File in Html

Display PDF within web browser

I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

Recommended way to embed PDF in HTML?

Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.

Online demo:
https://mozilla.github.io/pdf.js/web/viewer.html

GitHub:
https://github.com/mozilla/pdf.js

How to embed a PDF viewer in a page?

You could consider using PDFObject by Philip Hutchison.

Alternatively, if you're looking for a non-Javascript solution, you could use markup like this:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

How to Display PDF File using Select Change Event with JQuery, Ajax and MVC

For rendering the updated html when ajax postback, you can use .html() in success function by default. You can see a simple example here. But in your scenario you use embed element, it can only be updated with src but cannot display the updated pdf by ajax. So I suggest use window.location.replace which can send a new request to backend and update the pdf.

@model UserFile 
<div class="pdfViewContainer">
    <div class="h3 card-header"><label id="pdfviewerlabel">Mechanical</label></div>
    <div id="pdfContainer" class="card-body">
        <div class="row mb-3">
            <div class="col-md-2">
                <form id="form" action="">
                    <select asp-for="FileId" asp-items="@Model.Files" id="selectPdf" class="form-control" datastyle="btn-warning">
                        <option disabled selected>-- Select File --</option>
                    </select>
                </form>
            </div>
        </div>
        <div id="pdf">
            <embed type="application/pdf" src="@Model.Path/@Model.Name" width="100%" height="1024px"/>
        </div>
    </div>
</div>

@section scripts {
 <script>
    $(function () {
        $("#selectPdf").change(function () {

            var url = "/Mechanical/Index";     //remember add `/`
        
            var filename = $(this).find(":selected").text();
            window.location.replace(url+"?filename="+filename);

           // $('#pdfViewContainer').load(url+"?filename="+filename);
            //$.ajax({
            //    url: url+"?filename="+filename,
            //    method:"GET",
            //    success:function(res){
            //        $("#pdfViewContainer").html(res);
            //    }
            //})             
        });
    });
</script>
}

Controller:

public IActionResult Index(string filename)
{

    string path = $"{_webHostEnvironment.WebRootPath}{fileDirectory}";
    int nId = 1;

    var userFile = new UserFile();
    userFile.Files = new List<SelectListItem>();

    foreach (string pdfPath in Directory.EnumerateFiles(path, "*.pdf"))
    {
        userFile.Files.Add(new SelectListItem
        {
            Text = Path.GetFileName(pdfPath),
            Value = nId.ToString(),
            Selected = filename== Path.GetFileName(pdfPath)?true : false    //better to modify here...
        });

        nId++;
    }

    int listCount = userFile.Files.Count - 1;
    userFile.Name = userFile.Files[listCount].Text;
    userFile.Path = fileDirectory.Replace('\\', '/');
    if(filename != null)       
    {
        userFile.Name = filename;     //add here....
    } 
    return View(userFile);
}

---

Related Topics