Need to set pdf viewer toolbar off

Question

Trying to view pdf file. Toolbar is showing differently in different browsers. Is there any way to hide this toolbar in all browsers.

Code in .cshtml file:

    <div id="zoomOut">
       <object data="@Url.Action("ViewFinalReport", new { Id = @ViewBag.FileName, SystemId = Model.SystemId, InspectionReportId = Model.ReportId })" type="application/pdf" width="900" height="650"> 
        </object>
    </div>

Code in controller:

    public FilePathResult ViewFinalReport(string Id, int SystemId, int InspectionReportId)
    {
        string path = "";
        string filePath = "";
        string customerFolderName = "";
        SystemInspectionReport SystemInspectionReport = new Models.Objects.SystemInspectionReport();
        TestSoln.Models.Objects.SystemInspectionReports SystemInspectionReports = new Models.Objects.SystemInspectionReports(SystemInspectionReport, new BaseParams() { customerId = CustomerId, userId = UserId, timeOffSet = TimeOffSet });
        string FileName = SystemInspectionReports.GetInspectionSystemReportFileName(SystemId, InspectionReportId, true);
        DataTable dataTable = GetCustomerDetails(CustomerId).Tables[0];
        if (dataTable.Rows[0]["Folder"] != DBNull.Value)
        {
            customerFolderName = dataTable.Rows[0]["Folder"].ToString();
        }
        path = HttpContext.Application["FileFolder"].ToString() + "\\" + customerFolderName + "\\InspectionReports\\" + SystemId + "\\" + InspectionReportId + "\\FinalReport\\" + FileName;
        filePath = new AppSettings()[AppSettingsKey.FileLocation].Value + path;
        return File(filePath, "application/pdf");
    }

I can view the pdf in all the browsers. But the problem is that toolbar shown differently in different browsers. So I want to hide the toolbar. Any idea??

Answer 1

You can use embed instead of object and just add #toolbar=0 at the end of url to remove the toolbar. Not sure if the same applies to object.

<embed src="@Url.Action("ViewFinalReport", new { ...})#toolbar=0" width="500" height="375"> (Disable toolbar)
<embed src="@Url.Action("ViewFinalReport", new { ...}#toolbar=1" width="500" height="375"> (Enable toolbar)

EDIT:

---

Currently there is no easy configuration that can be done and works for all browsers.

The #toolbar and some other parameter setted after # are Adobe's proprietary "PDF Open Parameters". This works on Chrome because Chrome's PDF Viewer was made with compatibility with Acrobat's parameters.

So, if your user does not use Adobe reader extension, most users uses default browser configuration, this parameters may not work. As developers we have no control on what plugin/extension the user have configured on their browser to show PDF files.

An alternative is to use Mozilla's pdf.js library, that can render the pdf file inside a canvas. At this link you will find some live examples: https://mozilla.github.io/pdf.js/examples/

This a commom problem and you can find some questions on Stack Overflow and mozilla community about it:

How can I embed a PDF in a webpage without showing the Firefox PDF viewer toolbars?

Hiding the toolbars surrounding an embedded pdf?

Can I hide the Adobe floating toolbar when showing a PDF in browser?

Hide toolbar of pdf file opened inside iframe using firefox (This one has a good explanation too)

Hiding the toolbars surrounding an embedded pdf?

https://support.mozilla.org/nl/questions/1262019

https://support.mozilla.org/en-US/questions/1119523