Remove Save button from pdf in iFrame

zequion 446 Reputation points
2024-08-06T01:03:10.5866667+00:00

In an Asp.net application I am displaying a PDF in an iframe. I don't want the "Save" button to be displayed. I have tried with "toolbar=0" but it doesn't work in Mozilla.

How can I always remove the "Save" button?

Is there any other free PDF viewer?

Example: <iframe id='Form_PdfViewer_iframe' class='PdfViewer_iframe' src='http://server:81/Don Quijote.pdf#toolbar=0&view=Fit&navpanes=0&scrollbar=0' allowfullscreen style='width:794px; height:1073px;'>

453871317_350872748066433_6194714139452327047_n

Developer technologies ASP.NET Other
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff
    2024-08-06T06:30:43.2833333+00:00

    Hi @zequion,

    Toolbar=0 only works in any browser except Firefox and without the PDF.JS extension downloaded.

    For Firefox's built-in PDF viewer, you can disable the button by overriding the site's CSS in Firefox using userContent.css, but this method is not recommended.

    I suggest using PDF.js. You can create your own buttons, navigation, etc. and everything will run in a <canvas>, for example:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
       <style type="text/css">
            #pdf_container { background: #ccc; text-align: center; display: none; padding: 5px; height: 820px; overflow: auto; }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="button" id="btnPreview" value="Preview PDF Document" onclick="LoadPdfFromUrl('assets/images/test.pdf')" />
        <hr/>
        <div id="pdf_container"></div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf_viewer.min.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            var pdfjsLib = window['pdfjs-dist/build/pdf'];
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
            var pdfDoc = null;
            var scale = 1; //Set Scale for zooming PDF.
            var resolution = 1; //Set Resolution to Adjust PDF clarity.
            function LoadPdfFromUrl(url) {
                //Read PDF from URL.
                pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
                    pdfDoc = pdfDoc_;
                    //Reference the Container DIV.
                    var pdf_container = document.getElementById("pdf_container");
                    pdf_container.style.display = "block";
                    //Loop and render all pages.
                    for (var i = 1; i <= pdfDoc.numPages; i++) {
                        RenderPage(pdf_container, i);
                    }
                });
            };
            function RenderPage(pdf_container, num) {
                pdfDoc.getPage(num).then(function (page) {
                    //Create Canvas element and append to the Container DIV.
                    var canvas = document.createElement('canvas');
                    canvas.id = 'pdf-' + num;
                    ctx = canvas.getContext('2d');
                    pdf_container.appendChild(canvas);
                    //Create and add empty DIV to add SPACE between pages.
                    var spacer = document.createElement("div");
                    spacer.style.height = "20px";
                    pdf_container.appendChild(spacer);
                    //Set the Canvas dimensions using ViewPort and Scale.
                    var viewport = page.getViewport({ scale: scale });
                    canvas.height = resolution * viewport.height;
                    canvas.width = resolution * viewport.width;
                    //Render the PDF page.
                    var renderContext = {
                        canvasContext: ctx,
                        viewport: viewport,
                        transform: [resolution, 0, 0, resolution, 0, 0]
                    };
                    page.render(renderContext);
                });
            };
        </script>
        </form>
    </body>
    </html>
    

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.