hide pop-out in google docs viewer using javascript-jquery

Question

I am using google docs viewer to display word and PDF files in dialog in my application. But my client need that document should not get download. So want to hide 'Pop-out' option. Please help me for it. Below is my code snippet :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(function () {
        $("#btnShow").click(function () {
            $("#dialog").dialog({
                modal: true,
                title: '',
                width: 750,
                height: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }                   
                },
                open: function () {
                    var object = "<iframe id='resViewer' src='https://docs.google.com/viewer?url=my_file.pdf&embedded=true' style='width: 700px; height: 700px;' frameborder='0'></iframe>";                    

                    $("#dialog").html(object);
                }
            });
        });
    });
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>

Please help me.

If anyone knows any other way to display word and PDF file both give me way or suggest for this.

Thanks.

You could stop the pop out button from displaying with the CSS rule `display: none`. — hostingutilities.com, Mar 22 '16 at 06:08
Oh wow, Google is using class names like ndfHFb-c4YZDc-MZArnb-LgbsSe ndfHFb-c4YZDc-to915-LgbsSe making everything difficult. Why is your client so against others downloading his PDFs? There already out on the web for everyone to see, I don't see what's so bad about a person having a local copy of the PDF that they can print out and review. — hostingutilities.com, Mar 22 '16 at 06:27

score -1 · Answer 1 · edited May 23 '17 at 11:59

-1

The following CSS will remove the pop out button.

div[aria-label="Pop-out"] {
    display: none;
}
div["aria-label=toolbar"] {
    width: 52px;
}

But to get the CSS to apply to the iframe your going to have to do some trickery. See jQuery, select element inside iframe, which is inside an iframe and How to apply CSS to iframe?

edited May 23 '17 at 11:59

Community

1
1

answered Mar 22 '16 at 06:39

hostingutilities.com

8,894
3
41
51

I have set this in style tag like this : But this is not working. Please tell me where to set it? – iDipa Mar 22 '16 at 06:44
So I just opened up a Google Doc, and went to file publish, and the embed code that they gave me does not have a download link. See this fiddle -- https://jsfiddle.net/kaagvxLb/ Also when I clicked on share and then advanced there was an option at the bottom to prevent downloading, printing, and copying. – hostingutilities.com Mar 23 '16 at 01:57
Here I am using file which is stored to Azure Blob storage. A PDF and word file. Can you please guide me for it. – iDipa Mar 23 '16 at 04:22
I forgot that CSS won't affect iframes. You'll have to dynamically append a stylesheet to the iframe with JavaScript. See the following question on how to do this -- http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – hostingutilities.com Mar 23 '16 at 23:53
I tried to create a fiddle of this, but this is as far as I could get. https://jsfiddle.net/b3x26Lst/2/ But if you don't have too many files you're dealing with, there is an option in Google Docs to prevent downloading a file. Also In the SO question In the last comment I posted many of the answers won't work anymore because of cors policies. I updated the answer with a better question you can view. – hostingutilities.com Mar 24 '16 at 00:25

hide pop-out in google docs viewer using javascript-jquery

1 Answers1

Linked