About Foxit PDF SDK for Web API

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

Integrate to your project and create your own web page

  1. Create a new directory as a project folder, such as D:/www.
  2. Download FoxitPDFSDKForWeb.zip, unzip it to D:/www/lib for example.
  3. Under the ‘www’ folder, create an HTML file. The directory structure is:

    webpdf

     +-- lib
     |    +-- <SDK package files ...>
     +-- index.html

If you are on port 8080 for example. You can access the Foxit PDF SDK for Web Demo at http://localhost:8088/webpdf/index.html after setting up the HTML page. Now Let’s add elements to the html page step by step.

  1. Add a style to the <head> tag of the HTML page.

     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&subset=all">
     <link rel="stylesheet" href="./styles/webpdf.full.mini.css">
  2. In the HTML <body> tag, add the <div> elements as the web viewer container, and add the dependencies of JavaScript files.

     <div id="docViewer" style="background: #dddedf;"></div>
     <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/jquery-ui.min.js"></script>
     <script type="text/javascript" src="./scripts/jquery.form.min.js"></script>
     <script type="text/javascript" src="./scripts/release/webpdf.full.mini.js"></script>
     <script type="text/javascript" src="./scripts/control/toolbar/toolbar-config.bundle.js"></script>
     <script type="text/javascript" src="./scripts/demo-license-key.js"></script>
    • jquery.js: Required by Foxit PDF SDK for Web, so it must be included.
    • webpdf.full.mini.js: SDK core library file.
    • toolbar-config.bundle.js: Contains the initial toolbar layout and settings. If not referenced here, viewer will be loaded without toolbar.
    • demo-license-key.js: Store the license information with a global variable window.demoLicenseKey. If not referenced here, demo will not be licensed.
  3. Add the following script to create a new instance of Foxit PDF SDK for Web and load a document. The 'doc' should be the path to one of your PDF files.

     <script>
     var docViewerId = 'docViewer';
     $(document).ready(function(){
         var optionsParams = {
             language: window.getLanguage(),
             toolbarConfig: window.toolbarConfig,
             fontUrl: 'http://webpdf.foxitsoftware.com/webfonts/',
             licenseKey: window.demoLicenseKey,
         };
         WebPDF.ready(docViewerId, options, false).then(function(){
             openDocument();
         });
         function openDocument(){
             var fileurl = WebPDF.baseUrl + 'doc';
             var openFileParams = {
                 url: fileurl,
                 fileId: fileurl
             };
             WebPDF.ViewerInstance.openFileByUri(openFileParams).catch(function(error){
                 console.log(error);
             });
         }
     });
    </script>

Options

Before you initiate the SDK, you can set options once the DOM is located. Only the option licenseKey is obligatory for authenticating Web SDK, the others are set according to your needs.

Initializing custom toolbar

If you have customized toolbar, you will create toolbar by using new WebPDF.Toolbar() following WebPDF.ready() before initializing the viewer. See tutorial/toolbar_en.html for detailed information.

Document Loading

In this example, you will load "butterflies.pdf" included in the package. To load a new PDF file, set fileurl to a pdf document. If you need to load a document from stream, use openFileByStream by replacing with the following code:

    WebPDF.ready(docViewerId, options, false).then(function(){
        openDocument();
    });
    function openDocument(){
        var fileurl = WebPDF.baseUrl + ' docs/sample/butterflies.pdf';
        var openFileParams = {
            url: fileurl,
            fileId: fileurl
        };
        WebPDF.ViewerInstance.openFileByUri(openFileParams).catch(function(error) {
            console.log(error);
        });
    }