Remove download button from embedded PDF viewer with jQuery

Other Questions Google docs
1

I’m working on a web app that shows PDF and Word documents in a modal popup. The problem is that users can still download the files using the viewer controls, but my boss wants to prevent downloads completely.

I tried using an embedded document viewer but the download option still appears. Here’s what I’m currently using:

$(document).ready(function() {
    $("#showDocument").on("click", function() {
        $("#documentModal").dialog({
            modal: true,
            width: 800,
            height: 500,
            resizable: false,
            buttons: {
                "Close": function() {
                    $(this).dialog("close");
                }
            },
            open: function() {
                var embedCode = "<iframe class='doc-frame' src='https://docs.google.com/viewer?url=sample_document.pdf&embedded=true' width='100%' height='400px' frameborder='0'></iframe>";
                $("#documentModal").html(embedCode);
            }
        });
    });
});

<button id="showDocument">View Document</button>
<div id="documentModal" title="Document Viewer" style="display:none;"></div>

Is there a way to hide the pop-out button completely? Or maybe there’s a better solution for displaying both PDF and Word files without allowing downloads? Any help would be great.

2

yeah, i agree. the google viewer’s a bit limited on controls. have you thought about using a PDF.js? it’s more customizable and you can hide all those download options. takes some setup but way better for your needs.

3

Converting documents to images server-side might work but creates accessibility issues. Another approach I’ve used successfully is implementing a custom viewer using Mozilla’s PDF.js library combined with server-side document conversion. You can configure PDF.js to completely remove the toolbar by setting the viewer parameters, and for Word documents, convert them to PDF first using something like pandoc or unoconv before serving them through your custom viewer. This maintains document quality while giving you complete control over what users can access. The initial setup takes more work than embedding Google’s viewer, but you’ll have full control over the interface and can ensure downloads are truly blocked rather than just hidden.

4

I faced a similar challenge while developing a document review platform. The Google Docs viewer’s controls are persistent, making it impossible to remove them effectively using CSS or JavaScript due to the sandboxed iframe. I found that transitioning to PDF.js for displaying PDFs while converting Word documents to images on the server with a tool like LibreOffice in headless mode was highly effective. PDF.js allows you to customize the viewer settings to disable the download option, offering you full control over user access. Although this requires more initial effort, it significantly enhances security. Converting Word files to images may hinder text selection, but it successfully prevents downloads while ensuring they remain readable.