Customize CSS of Google Docs Viewer

Customize CSS of Google Docs Viewer

I asked this so i could post the solution. Its totally hacky and based off of a an answer from another thread on SO.

I had to make a few modifications to get it working because the answer linked above didn't quite work with google docs.

Basically you proxy the requests server side, modify the html and then relay the iframe contents.

<?php
if ( isset( $_GET['a'] ) && $_GET['a'] == 'gt') {
    // proxy xml content - must be done to avoid XSS failures (contains embedded link data and enables text selection)
    $code = gde_get_contents("https://docs.google.com/viewer?" . $_SERVER['QUERY_STRING']);
    header('Content-type: application/xml');
    echo $code;
} elseif ( isset( $_GET['a'] ) && $_GET['a'] == 'bi' ) {
    // proxy image content - prevents "too many redirects" on many-paged docs
    header( "Location: https://docs.google.com/viewer?" . $_SERVER['QUERY_STRING'] );
} elseif ( isset( $_GET['jsfile'] ) ) {
    // proxy javascript content - not doing anything here but Google changes return 404 if not proxied (??)
    $code = file_get_contents("https://docs.google.com/" . $_GET['jsfile']);  
    header('Content-type: text/javascript');  
    echo $code; 
} else {
  $content = file_get_contents('http://docs.google.com/viewer?url=http%3A%2F%2Fwww.someurlhere.com%2Fgoogledocs%2Ftest.docx&embedded=true');
  $content = str_replace('gview/resources_gview/client/js','/googledocs/index.php?jsfile=gview/resources_gview/client/js', $content);
  $content = str_replace('</head>','<link rel="stylesheet" href="http://www.example.com/google.css" /></head>', $content);
  header('Content-type: text/html; charset=utf-8');
  echo $content;  
}
?>

Make sure to change the line:

file_get_contents('http://docs.google.com/viewer?url=http%3A%2F%2Fwww.someurlhere.com%2Fgoogledocs%2Ftest.docx&embedded=true');

to the applicable url for the iframe you are trying to host.

Also change the line:

  $content = str_replace('</head>','<link rel="stylesheet" href="http://www.example.com/google.css" /></head>', $content);

To link to your stylesheet.

Google Docs iFrame: How to customize the css of an embedded Google Docs iFrame

I can't say for certain whether this is the issue or not, but, because it's appearing differently in different browsers, I'm inclined to believe it's a matter of CSS normalizing/resetting. This answer has a script for doing that, and several more are in the comments, so I recommend checking it out.

Is there a way to style Google Chrome default PDF viewer

There is no way to directly style the Chrome default PDF viewer (PDFium). Because the plugin displays and controls content outside the scope of the current page's DOM, it can only be modified by the plugin. As indicated here it is impossible to make modifications to this sort of plugin controlled content unless the plugin also adds a content script that allows the page to pass messages to the plugin; the plugin must additionally be programmed to respond to messages and appropriately update the content. In other words the PDF viewer uses a separate DOM to the page which is not directly accessible. Instead you need to access an implemented API.

In this discussion Mike West (Google/Chromium dev) states, in answer to a question on DOM accessibility in Chrome's PDF viewer:

The functionality available in the PDF viewer is (intentionally) fairly limited ... The APIs you're having trouble finding simply don't exist.

Basic API functions are some of those specified by Adobe in their Parameters for Opening PDF Files and are accessed through the URL (eg http://example.org/doc.pdf#page=3&pagemode=thumbs. They are, as indicated above, quite limited, allowing the user to go directly to a page, set zoom factor, show thumbnails etc. Accessing an expanded API through content script messages can potentially be done if you know the available JavaScript messages. A complete list of available JS message names can be determined from the relevant PDFium source here from which it can be seen that advanced styling of the viewer, such as changing colours, isn't possible. (This question gives an example of how to implement the API). Certainly there is no access to PDFium's DOM.

This API is deliberately left undocumented; it may change with additions or removals at any time. Thus, while it's possible that in the future there will be an API to let you style some aspects of the viewer, it's very unlikely that any would go so far as to change the background colour or modify a CSS shadow. And, as stated above, without an API you can't modify content controlled by a plugin when you don't have access to its DOM.

---

You may, instead, wish to try PDF.js. It is an open source JavaScript library that renders PDF files using HTML5 Canvas. It is also Firefox's default PDF viewer and is quite capable.

Implementing it as a web app is beyond the scope of this question, but there are many helpful tutorials available. And as you, the developer, will have access to all constituent files, you will certainly be able to style the PDF.js viewer as much as you wish.

google docs iframe - change padding

Change the last portion of your url from true to false.

https://docs.google.com/document/d/1s2nOQZ39dKD-hsmox5twmmKKkuXzOopT1eXFbMh5DeE/pub?embedded=false

The demo includes use of all of the embedded elements:

<iframe>, <embed>, and <object>

Plunker

When you set embedded=true Google server will add a class named .c1 to the <body> of the content inside the <iframe>

.c1 {
    background-color: rgb(255, 255, 255);
    max-width: 468pt;
    padding: 72pt 72pt 72pt 72pt;
 }

That's just plain reckless of Google if you ask me. I suggest that you set padding on the content itself and set embedded=false.

---

Related Topics