Index

About WebPDF Viewer API

Foxit WebPDF Viewer is a cross-platform solution for quickly displaying and manipulating PDF document in a web browser. Built on Foxit’s widely-used core PDF technology, WebPDF Viewer provides extensive and easy-to-use capabilities for online viewing. This guide will show you how to quickly create your own basic WebPDF Viewer page.

Start to create your own basic WebPDF Viewer

  • Download the WebPDF Viewer package and then refer to the Deployment Guide for instructions on how to install and configure WebPDF Viewer on Windows and Linux.
  • Once installation is complete you should be able to open the WebPDF Viewer demo at http://{ip}:{port}/ which is usually http://localhost:8080/ if you have used the default settings.
  • To integrate WebPDF Viewer into your webpage: Create a HTML page named “myviewer”(choose a name you like), and place it in the installation directory at ..\webpdf\viewer\webapp\pc

  • Create a <div> tag in the HTML <body> section and reserve “docViewer” as the ID. This will be the container for the WebPDF Viewer.

    <div id="docViewer" style="background: #ABABAB;"></div>
  • Add a style for the viewer element in HTML <head> section so that is takes up a reasonably sized area.

     <style>
      #docViewer { 
            height:700px;
           width:800px;
      }
     </style>
  • Add the css link in the section

     <link rel="stylesheet" type="text/css" href="../styles/reader/pc/webpdf.frontend.mini.css" />
     <link rel="stylesheet" type="text/css" href="../styles/reader/webpdf.mini.css"/>
  • Add the following script after the HTML body section closes (<body>) to create a new Viewer instance

    <script type="text/javascript" src="../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript" src="../scripts/release_websdk/webpdf.tools.mini.js"></script>
    <script type="text/javascript" src="../scripts/control/common/common.js"></script>
    <script type="text/javascript" src="../scripts/config/config.js"></script>
    <script type="text/javascript" src="../scripts/release_websdk/webpdf.mini.js"></script>
    <script type="text/javascript" src="../scripts/config/apiConfig.js"></script>
    <script type="text/javascript">
     var docViewerId = 'docViewer';
     $(document).ready(function() {
       var optionsParams = {
           language: getLanguage(),
           serverBaseUrl: WebPDF.serverBaseUrl,
           baseUrl: WebPDF.baseUrl
       };
    
       WebPDF.ready(docViewerId,optionsParams).then(function(data) {
           return WebPDF.ViewerInstance.updateCurrentUserInfo();
       }).then(function(data) {
           var openFileParams = {
               url: getBaseUrl() + 'docs/sample/butterfiles.pdf'
           };
           WebPDF.ViewerInstance.openFileByUri(openFileParams);
       });
    
       $(window).resize(function() {
           if(WebPDF == null || WebPDF.ViewerInstance == null){
               return;
           }
           var $docViewer = $("#docViewer");
           var viewWidth = $docViewer[0] && $docViewer[0].offsetWidth ? $docViewer[0].offsetWidth + $docViewer[0].offsetLeft: $(window).width();
           var viewHeight = $docViewer[0] && $docViewer[0].offsetHeight ? $docViewer[0].offsetHeight : $(window).height();
           WebPDF.ViewerInstance.updateLayout(viewWidth, viewHeight);
       });
    });
    </script>
  • Open your viewer at: http://localhost:8080/pc/myviewer.html

  • To open your own PDF file, use one of these two methods:

Add a uri parameter in the open URL to open a network PDF file (HTTP file)

    http://localhost:8080/pc/myviewer.html?docuri=http://webpdf.foxitsoftware.com:8085/httpserver/doc/3BigPreview.pdf

The docuri is the download link of PDF file.

Modify the parameter of openFileByUri() in the script content in step 7:

     url: getBaseUrl() + 'docs/sample/butterfiles.pdf'

Replace "getBaseUrl() +'docs/sample/butterflies.pdf'" to the URL of your file, and then open http://localhost:8080/pc/myviewer.html - There is also a HTML GettingStarted sample in the installation directory: .. foxitsoftware\webpdf\viewer\webapp\pc\gettingstarted.html. - WebPDF Viewer uses Server Rendering (SR) for PC Viewer by default. You can change to JavaScript Rendering(JR) in the console at: http://localhost:9000/console ( default name&password: admin, admin)

That is it! You have now created a basic WebPDF Viewer for your web page. Please refer to the following documents (in the download package for WebPDF Viewer) for more information about how to use and integrate WebPDF Viewer into your web solutions:

  • User Guide
  • Developer Guide
  • Deployment Guide
Copyright ©2015-2016, Foxit Software Inc. All Rights Reserved.
Documentation generated by JSDoc 3.2.2 on Fri Mar 31st 2017 using the DocStrap template.