Creating a Report Viewer for Multiple PDF, PPT or DOC Documents

Version 2

    I've created several standalone document viewers for various products.  These viewers can be helpful in explaining or demonstrating possible reporting output for products without actually having to install the product.  The viewers, once created are completely standalone and require only a browser to view the reports or document samples. 


    Here are some links to the various examples I've created:


    In this article, I'll explain how these packages was developed and how this may be extended and/or used for other products.  I've also attached a fully functional example that can be used as a starting point for your own custom document or report viewer.


    At a high level, the package consists of the following components:


    Report Data

    • Example Reports - the full content of each of the example reports. These are PDF files from the actual report runs.
    • Screenshots - In addition to the reports, there are screenshots of the reports - used as thumbnails on the initial information page.
    • Metadata - this is the data used to describe each of the example reports. Things like report description, date published, etc.


    Report Viewer

    The report viewer tool was written in javascript using the ExtJS framework. The framework has components such as the treeview you see on the left hand side of the report viewer application.


    To utilize ExtJS, you simply include a link to the framework library in your main HTML file. This enables you to leverage hundreds of components and their methods. For this specific application, I'm leveraging the treeview control to display groups and documents in the left hand navigation panel. Clicking on a document in the treeview renders the document details in the center panel.


    The ExtJS components can leverage calls to server side data for their content - or - can utilize xml or json hard-coded data right in the application itself. More on this later.



    In order to create the package, I first needed to assemble the report data and examples.   Collecting the PDF reports from the product is probably the most difficult part of the process.  Luckily someone had already done that for me. 


    Here's the process to use once you have the PDF reports collected.


    The report viewer application was created to provide a mechanism for viewing collections of sample reports.  A design goal for this application was for it to be completely standalone – not requiring any additional software or web server to view the documents. is a perl script that was written to create a javascript object notation assignment (JSON) used to populate a treeview control for the purpose of displaying example pdf reports with previews. In order to use this package to create your own custom file or report viewer, you must create

    a comma separated value (CSV) file with the following values.




    Column 1 - Report file specifies the name of the PDF report file that will be downloadable from within the viewer.

    Column 2 - Preview file specifies the name of the preview or thumbnail image that will be presented in the details pane of the viewer application.

    Column 3 - Group specifies the treeview group where this report will be grouped.  You should sort your csv file so that groups are stored together.

    Column 4 - Title specifies the title of the report and will be displayed in the details pane of when the user clicks on the report in the treeview.

    Column 5 - Description specifies the details of what the report will show.




    reportfile_number_one.pdf,preview_of_report_file_one.png,Group One,Example of a Report File One,This report shows some serious stuff.

    reportfile_number_two.pdf,preview_of_report_file_two.png,Group One,Example of a Report File Two,This report shows some more serious stuff.

    reportfile_number_three.pdf,preview_of_report_file_three.png,Group Two,Example of a Report File Three,This report shows some more serious stuff.

    reportfile_number_four.pdf,preview_of_report_file_four.png,Group Two,Example of a Report File Four,This report shows some more serious stuff.

    reportfile_number_five.pdf,preview_of_report_file_five.png,Group Two,Example of a Report File Five,This report shows some more serious stuff.

    reportfile_number_six.pdf,preview_of_report_file_six.png,Group Three,Example of a Report File Six,This report shows some more serious stuff.

    reportfile_number_seven.pdf,preview_of_report_file_seven.png,Group Three,Example of a Report File Seven,This report shows some more serious stuff.



    You may include the column headers in your file - however, ensure that you use

    the --skipheader flag when executing the script.




    Perl.  The script is written in perl so you will need an

    environment were you can execute perl scripts.  A subrequirement is that I'm

    using some libraries that you may not have installed in your perl environment.

    Checkout if you get some errors about missing



    Here's an overview of the process to create your own custom document viewer.


    1.    Download the docviewer package.  This will contain everything you need to

    create and customize your own self contained document viewer.  Self contained

    means that you don't even need to host these documents and the viewer on a web

    server... you can simply open the index.html file from a browser.


    2.    Review the directory tree for the example package.


    |-- css            Style Sheets

    |-- extjs          Javascript Library for the treeview and panel components

    |-- images       Various supporting image files (like icons, etc.)

    |-- js               Javascript source files

    |-- reports        Report directory - this is where you'll place the reports, pdfs and preview thumbnail files that will be displayed in the viewer.

    `-- scripts        Scripts used to create and customize your viewer


    3.    Since you'll be creating your own document or report viewer, you'll probably want to delete the contents of the reports directory. 


    4.    Create the report files that you’ll be displaying in the document viewer.  Report files can be PDF, PowerPoint (ppt) or Word Document (doc) files.  Typically, the report file examples are multi-page pdf files.  Once you have the report files, copy them into the reports directory in the base of the example package.


    5.    Create a screenshot, or preview image that will be displayed in the preview section of the details panel when viewing the report.  zScreen is a great, free utility that lets you capture portions of your screen and save them to files.  I prefer ‘png’ format because of smaller size.  You’ll need to create one preview image for each report you plan to display in the document viewer.  Copy or place these preview image files into the reports directory along side the actual pdf or ppt report files.


    6.    Now you'll need to create a comma-separated file that contains the names of your report files, the groups they'll be displayed in, the document titles and a description of each.  As previously mentioned the format for this file is REPORTFILE, PREVIEW, GROUP, TITLE, and DESCRIPTION.  You can find an example in the scripts directory in a file called example.csv. 


    7.    Create the documents.js file.  This is the file which contains the Javascript Notation (JSON) which is used to populate the treeview control as seen in this image.  The package contains a script named and can be found in the scripts directory of the example package.  This script should be run from the main directory of the archive and must be provided several command line options in order to execute properly.  The following is an example execution of the script:


    scripts/ --csvfile scripts/example.csv --outputfile js/documents.js


    This was executed from the base directory of the example archive file.  The –csvfile argument tells where to file the csv file that you created in step 5.  The –outputfile argument tells where to write the json.


    It is important to note that the script assumes that you have not modified the directory layout and that you are storing your reports and previews or thumbnails in the “reports” directory.  You may run the script with “—help” to obtain additional information and options.


    $ scripts/ --help

    Usage: scripts/ --csvfile <filename> [--outputfile <filename.js>]

        [--outputfile <outputfilename>] controls the output javascript filename - defaults to stdout

        [--reportdir <reportdirectory>] specifies the directory where the pdf files may be stored

        [--thumbdir <thumbnailedirectory>] specifies the directory where the thumbnail or preview image files may be stored

        [--htmltitle <htmltitle>] specifies the title to be used in the report viewer html file

        [[--overwrite] | [--nooverwrite]] - controls whether the output file will be overwritten


    The following is an example of the resultant documents.js file that is created.


    var json=[{"iconCls":"group","text":"Group One","children":[{"content":"reports/reportfile_number_one.pdf","description":"This report shows some serious stuff.","size":"16.23 KB","published":"01-29-2012","iconCls":"pdf","preview":"reports/preview_of_report_file_one.png","text":"Example of a Report File One","id":"1","leaf":"true"},{"content":"reports/reportfile_number_two.pdf","description":"This report shows some more serious stuff.","size":"16.23 KB","published":"01-29-2012","iconCls":"pdf","preview":"reports/preview_of_report_file_two.png","text":"Example of a Report File Two","id":"2","leaf":"true"}],"id":0.0960750988024337},{"iconCls":"group","text":"Group Three","children":[{"content":"reports/reportfile_number_six.pdf","description":"This report shows some more serious stuff.","size":"16.23 KB","published":"01-29-2012","iconCls":"pdf","preview":"reports/preview_of_report_file_six.png","text":"Example of a Report File Six","id":"6","leaf":"true"},{"content":"reports/reportfile_number_seven.pdf","description":"This report shows some more serious stuff.","size":"16.23 KB","published":"01-29-2012","iconCls":"pdf","preview":"reports/preview_of_report_file_seven.png","text":"Example of a Report File Seven","id":"7","leaf":"true"}],"id":0.119647523478733},{"iconCls":"group","text":"Group Two","children":[{"content":"reports/reportfile_number_three.pdf","description":"This report shows some more serious stuff.","size":"16.23 KB","published":"01-29-2012","iconCls":"pdf","preview":"reports/preview_of_report_file_three.png","text":"Example of a Report File Three","id":"3","leaf":"true"},{"content":"reports/reportfile_number_four.pdf","description":"This report shows some more serious stuff.","size":"16.23 KB","published":"01-29-2012","iconCls":"pdf","preview":"reports/preview_of_report_file_four.png","text":"Example of a Report File Four","id":"4","leaf":"true"},{"content":"reports/reportfile_number_five.pdf","description":"This report shows some more serious stuff.","size":"16.23 KB","published":"01-29-2012","iconCls":"pdf","preview":"reports/preview_of_report_file_five.png","text":"Example of a Report File Five","id":"5","leaf":"true"}],"id":0.423250772097287}]

    var htmltitle='Example Report Viewer;'



    Notice that the script determines the proper filetype and assigns the appropriate icon class – pdf for pdfs, ppt for ppts, etc.  Also note that the script determines the file size and date created.  These attributes are displayed in the details panel when viewing the documents.