Using the Google Document Viewer with filefield to embed PDFs in your Drupal content

A recent client wanted embedded PDFs in their content so their users didn't need to download a PDF reader to just view the files. Rather than using a Flash based page turning software as they had originally wanted I discovered the google document viewer (used in Gmail and google docs) can be used to render hosted PDFs either in an iFrame or full screen on a google branded page.

Google Document Viewer

<iframe src="http://docs.google.com/gview?url=http://path/to/your/file.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Using the Google Document Viewer with your files is relatively straight forward, using the iframe embed code above, and while this could easily be done at the theme level I wanted to add more integration with Drupal. The best way I thought to do that was to integrate it with filefield as a formatter.

Since I have never created a CCK formatter before so I followed along a blog post by Manuel García's aptly titled "How to create a CCK formatter" which gave me the basics. It should be noted that if you're extending an existing cck field type, look at the theme functions for the original formatter to help you figure out the best way to create your formatter.

Below are the three sections I needed to create the CCK formatter:

Declaration function for the formatter

<?php
/**
* Implementation of CCK's hook_field_formatter_info().
*/
function gdvrender_field_formatter_info() {
  return array(
   
'gdv' => array(
     
'label' => t('Google Document Viewer'),
     
'field types' => array('filefield'),
     
'description' => t('Display file in a google document viewer iframe'),
    ),
  );
}
?>

Declaring the theme function we will be using to theme the formatter declared above

<?php
/**
* Implementation of hook_theme().
*
*/

function gdvrender_theme() {
 
$theme = array(
   
'gdvrender_formatter_gdv' => array(
     
'arguments' => array('element' => NULL),
    ),
  );
  return
$theme;
}
?>

The actual theme function which renders out the google document viewer with our file as well as the original download link created by filefield.

<?php
/**
* Theme function for the 'googledoc' formatter.
*/
function theme_gdvrender_formatter_gdv($element) {

  global
$base_url;

 
$file = $element['#item'];
 
$field = content_fields($element['#field_name']);
 
 
// Outputs original link to file with mimetype logo
 
$output = theme('filefield_item', $file, $field);

 
// Outputs the iframe embed for the google doc.
 
$output .='<iframe src="http://docs.google.com/gview?url=' . $base_url . '/' . $element['#item']['filepath']  . '&embedded=true" style="width:720px; height:500px;" frameborder="0"></iframe>';
 
  return
$output;
 
}
?>

I will be creating a module project page for this soon. Which will include settings for changing the size of the iFrame, as well as other render options that don't have the download link.

Comments

Hi .. I need similar

Hi .. I need similar functionality to this, and was also considering implementing the this on a theme level.

Did you end up creating a module for this?; if not I'd be happy to go ahead and create one.

Perfect

Hola soy de peru
me funciono a la perfeccion.. e estado horas y horas buscando solucion. gracias ;)

Great tip!

Wrapped it in a module and uploaded it to github --->http://goo.gl/oFF5x
Cheers

Any Ideas on a D7 Port

Hi Arvin,
Any ideas for a possible porting to D7?

Drupal 7 / Permissions

I'm also interested in a Drupal 7 version of this...

One other question: Does the Google viewer allow any type of permission control so that the file can only be viewed (and not downloaded or edited) when it is embedded?

--Ben

Show in a popup with shadowbox

I made a small change in order to view the documents in a popup with shadowbox.

$output .='Show on Google Viewer';

Sandro from bitcode.me

Possible to use with CCK Link module?

Hey it'd be great to be able to use this display with the Link module, thereby allowing the user to link directly to a Google Doc hosted on Google—not just a file uploaded to one's own server.

Guys, I don't want users to

Guys, I don't want users to download the pdf file or save it, how can this be done????

Post new comment

By submitting this form, you accept the Mollom privacy policy.