HTML to PDF

If you wish to install HTML to PDF on an existing website with a lot of content already created, we suggest you check out the manual installation below. If you’re just getting started, you can use the quick start guide included with your download. The instructions for use follow.

When you open up htmltopdf.html, two sections are included in the body:

<section class="selectable">
          <div class="wppdf-wrap">
          <button name="Filename" class="wppdf-download">Download</button>
          <div class="wppdf">

          <!-- Start PDF content -->

          <!-- End PDF content -->

          </div>
          </div>
        </section>

and

<section class="canvas">
          <div class="wppdf-wrap">
          <button name="Filename" class="wppdf-download-canvas">Download</button>
          <div class="wppdf">

          <!-- Start PDF content -->

          <!-- End PDF content -->

          </div>
          </div>
        </section>

The first section labeled Selectable will generate a PDF that has selectable text. This method is meant for simple, text-only conversions.

The second section labeled Canvas will generated a PDF that preserves your layout and style. This method is mean for complex layouts.

You can copy/paste the code above to add as many different downloadable sections as you want!

If you want to add the HTML to PDF functionality to your existing website, you will need to manually install all of the scripts.

Include jQuery in your website’s head section if you have not already:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Add the following scripts just before the closing body tag.

<script type="text/javascript" src="js/html2canvas.js"></script>
      <script type="text/javascript" src="js/jspdf.debug.js"></script>
      <script type="text/javascript" src="js/toBlob.js"></script>
    <script type="text/javascript" src="js/wppdf-front.js"></script>

You will also need to include the required styles by either adding them to an existing style sheet or attaching the included style sheet.

Attachment Method:

<link href="css/wppdf-front.css" rel="stylesheet" type="text/css">

Required Styles Method:

.wppdf-wrap {
      position:relative;
    }
    .wppdf-wrap .wppdf-download,
    .wppdf-wrap .wppdf-download-canvas {
      display:none;
      position:absolute;
      right:0;
      background:#222 url(../images/pdf-icon.png) no-repeat center left 15px;
      opacity:.7;
      border:none;
      color:#fff;
      padding:10px 15px;
      padding-left:45px;
      cursor:pointer;
      text-transform:uppercase;
    }
    .wppdf-wrap:hover .wppdf-download,
    .wppdf-wrap:hover .wppdf-download-canvas {
      display:block;
      z-index:999999;
    }

Usage

The following HTML markup is used to create downloadable content. The button’s class is “wppdf-download” by default. This class generates a selectable PDF. If you change the class to “wppdf-download-canvas” like the example below, it will preserve your styles and layout in the PDF, but the content will not be selectable.

<div class="wppdf-wrap">
      <button name="Filename" class="wppdf-download-canvas">Download</button>
      <div class="wppdf">

      <!-- Start PDF content -->

      <!-- End PDF content -->

      </div>
    </div>

Follow the instructions below to install wpPDF

If you intend to use the Visual Composer element included with this plugin, ensure that you have Visual Composer installed first!

Once you have bought the wpPDF Plugin, download and extract the files.

From the back-end of WordPress, Navigate to Plugins > Add New > Upload Plugin and browse for the wpPDF zip folder.

Once it has been successfully installed, click Activate Plugin

That´s it! Move on to the How to Use sections below!

Please note that these instructions work even if you don´t have Visual Composer installed

If you do have Visual Composer installed, you can still use this method to create inline PDF downloads!

Using wpPDF is very simple. All of the content between an opening shortcode of [wppdf] and closing shortcode of [/wppdf ] will be available for download.

[wppdf]This content will be downloaded in a PDF[/wppdf]
To specify the filename and button text of the download, use the following parameters in the opening shortcode:

[wppdf btn="Export" filename="Report"]

Please note that this method of use only works if you HAVE Visual Composer installed on your WordPress website!

If you do have Visual Composer installed, wpPDF extends the functionality by providing you with a PDF Content element from which to choose:

When you select the PDF Content element, you are provided three inputs – Button Text, Filename, and PDF Content.

The Button Text parameter sets the value of the button that visitor will click to download the PDF (default = Download). The Filename parameter sets the filename of the PDF that will be generated (default = wppdf). The PDF Content will be the contents of the PDF that is generated.

Once you’ve set the above options and included your content, just hit save changes. When you save/publish your page, your content will now be available to download. Visitors that hover over that section of content will be presented with a button to download!