CODEWITHSUNDEEP
htmljquery
Glyn
Glyn

Reputation: 1995

DocRaptor does not show the values of input and textarea fields in the pdf produced

I am using DocRaptor to convert a HTML page to pdf. Unfortunately the values in the input and textarea fields are not showing in the pdf that is produced (my checkbox and table values are). The formatting is also not the same as the html page.

Example code is:

<div class="form-group row col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <label for="pdfName" class="text-right col-lg-1 col-md-2 col-sm-2 col-xs-12 col-form-label">Name:</label>
    <div class="col-lg-6 col-md-5 col-sm-4 col-xs-12">
        <input class="fullWidth" type="text" id="pdfName" name="pdfName" placeholder="Name" disabled>
    </div>

    <label for="pdfTime" class="text-right col-lg-2 col-md-2 col-sm-2 col-xs-12 col-form-label">Cooking Time:</label>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
        <input class="fullWidth" type="text" id="pdfTime" name="pdfTime" placeholder="Cooking Time" disabled>
    </div>
</div>

function downloadPDF() {    

    var recipeName = $.trim($("#pdfName").val()).replace(/ /g,"_");
    DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
        test: true, // test documents are free, but watermarked
        type: "pdf",
        name: recipeName+".pdf",
        document_content: document.querySelector('#pdfCateringRecipeForm').innerHTML, // use this page's HTML
        // document_content: "<h1>Hello world!</h1>",               // or supply HTML directly
        // document_url: "http://example.com/your-page",            // or use a URL
        // javascript: true,                                        // enable JavaScript processing
        // prince_options: {
           media: "screen",                                       // use screen styles instead of print styles
        // }
    })
}

The pdf page is:

enter image description here

The html page is:

enter image description here

Upvotes: 0

Views: 389

Answers (2)

user13752949
user13752949

Reputation: 21

Secondary approach that embeds the content in the required surrounding HTML, styles and scripts:

<html>
​
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
​
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
​
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://docraptor.com/docraptor-1.0.0.js"></script>
  <style>
    /*
    PrinceXML calculates Bootstrap's ".66666667%" grid width literally, resulting in a
    grid that is technically over 100%. Prince then drops the last column to a new row.
    These styles override Bootstrap and set the appropriate grid elements to simply
    end in "...6%".
​
    Also overriding the widths for non-...67-elements because Bootstrap interprets DocRaptor
    views as xs by default and makes columns 100% width as a result.
    */
    .col-xs-12 {
        width: 100%
    }
    .col-xs-11 {
        width: 91.66666666%
    }
    .col-xs-10 {
        width: 83.33333333%
    }
    .col-xs-9 {
        width: 75%
    }
    .col-xs-8 {
        width: 66.66666666%
    }
    .col-xs-7 {
        width: 58.33333333%
    }
    .col-xs-6 {
        width: 50%
    }
    .col-xs-5 {
        width: 41.66666666%
    }
    .col-xs-4 {
        width: 33.33333333%
    }
    .col-xs-3 {
        width: 25%
    }
    .col-xs-2 {
        width: 16.66666666%
    }
    .col-xs-1 {
        width: 8.444444444%
    }
    .col-xs-pull-11 {
        right: 91.66666666%
    }
    .col-xs-pull-8 {
        right: 66.66666666%
    }
    .col-xs-pull-5 {
        right: 41.66666666%
    }
    .col-xs-pull-2 {
        right: 16.66666666%
    }
    .col-xs-push-11 {
        left: 91.66666666%
    }
    .col-xs-push-8 {
        left: 66.66666666%
    }
    .col-xs-push-5 {
        left: 41.66666666%
    }
    .col-xs-push-2 {
        left: 16.66666666%
    }
    .col-xs-offset-11 {
        margin-left: 91.66666666%
    }
    .col-xs-offset-8 {
        margin-left: 66.66666666%
    }
    .col-xs-offset-5 {
        margin-left: 41.66666666%
    }
    .col-xs-offset-2 {
        margin-left: 16.66666666%
    }
  </style>
​
  <script>
    function downloadPDF() {
​
      var innerContent = document.querySelector('#pdfCateringRecipeForm').innerHTML
      var wrapper = `
      <html>
          <head>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
​
            <!-- Optional theme -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
​
            <!-- Latest compiled and minified JavaScript -->
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"><\/script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"><\/script>
            <script src="https://docraptor.com/docraptor-1.0.0.js"><\/script>
            <style>
              /*
              PrinceXML calculates Bootstrap's ".66666667%" grid width literally, resulting in a
              grid that is technically over 100%. Prince then drops the last column to a new row.
              These styles override Bootstrap and set the appropriate grid elements to simply
              end in "...6%".
​
              Also overriding the widths for non-...67-elements because Bootstrap interprets DocRaptor
              views as xs by default and makes columns 100% width as a result.
              */
              .col-xs-12 {
                  width: 100%
              }
              .col-xs-11 {
                  width: 91.66666666%
              }
              .col-xs-10 {
                  width: 83.33333333%
              }
              .col-xs-9 {
                  width: 75%
              }
              .col-xs-8 {
                  width: 66.66666666%
              }
              .col-xs-7 {
                  width: 58.33333333%
              }
              .col-xs-6 {
                  width: 50%
              }
              .col-xs-5 {
                  width: 41.66666666%
              }
              .col-xs-4 {
                  width: 33.33333333%
              }
              .col-xs-3 {
                  width: 25%
              }
              .col-xs-2 {
                  width: 16.66666666%
              }
              .col-xs-1 {
                  width: 8.444444444%
              }
              .col-xs-pull-11 {
                  right: 91.66666666%
              }
              .col-xs-pull-8 {
                  right: 66.66666666%
              }
              .col-xs-pull-5 {
                  right: 41.66666666%
              }
              .col-xs-pull-2 {
                  right: 16.66666666%
              }
              .col-xs-push-11 {
                  left: 91.66666666%
              }
              .col-xs-push-8 {
                  left: 66.66666666%
              }
              .col-xs-push-5 {
                  left: 41.66666666%
              }
              .col-xs-push-2 {
                  left: 16.66666666%
              }
              .col-xs-offset-11 {
                  margin-left: 91.66666666%
              }
              .col-xs-offset-8 {
                  margin-left: 66.66666666%
              }
              .col-xs-offset-5 {
                  margin-left: 41.66666666%
              }
              .col-xs-offset-2 {
                  margin-left: 16.66666666%
              }
            <\/style>
          <\/head>
​
          <body>
            --!CONTENT GOES HERE!--
          <\/body>
​
      <\/html>`
​
      var finalContent = wrapper.replace('--!CONTENT GOES HERE!--', innerContent);
​
      var recipeName = $.trim($("#pdfName").val()).replace(/ /g, "_");
      DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
        test: true,
        type: "pdf",
        name: recipeName + ".pdf",
        document_content: finalContent,
        prince_options: { media: "screen" }
      })
    }
  </script>
</head>
​
<body style="margin-left: 15px; margin-right: -15px;" >
  <div id="pdfCateringRecipeForm">
    <div>
      <br />
      <br />
      <br />
      <br />
      TEST:
      <br />
      <br />
      <br />
      <br />
    </div>
    <div class="row col-xs-12">
      <label for="pdfName" class="col-xs-4 col-form-label">Name:</label>
      <div class="col-xs-8">
        <input class="form-control input-lg" type="text" id="pdfName" name="pdfName" placeholder="Name" disabled>
      </div>
      <label for="pdfTime" class="col-xs-4 col-form-label">Cooking Time:</label>
      <div class="col-xs-8">
        <input class="form-control input-lg" type="text" id="pdfTime" name="pdfTime" placeholder="Cooking Time" disabled>
      </div>
    </div>
  </div>
  <button type="button" class="btn btn-primary" onclick="downloadPDF()">Download PDF</button>
</body>
​
</html>

A few notes:

  • Hardcoded tags in JavaScript text can't have the , as the browser interprets that as HTML even though it's in a string! So it had to be escaped with </script> in the JavaScript.
  • Bootstrap thinks most PDFs are on extra small devices, so I had to add all those styles. A bit yucky, but I think necessary.
  • You'll notice that scripts / styles have been duplicated in both the HTML and what gets sent to DocRaptor. This is because again DocRaptor needs to be made aware of Bootstrap. If you were to debug a content request or look at a doc_log without this extra code, you'd notice Bootstrap etc. don't get included.
  • We do a replace on '--!CONTENT GOES HERE!--' with the content we want to produce as a PDF in order to wrap the content in the appropriate scripts and styles. Overall, I think this is a little unwieldy, but it could work. I could definitely see a use case for it. It will likely be a little tricky to debug, but I hope this still allows you to move forward or understand the problem better.

​Let me know if this helps and if there's anything else I can do. Happy to help!

Upvotes: 0

user13752949
user13752949

Reputation: 21

One issue we're going to have is that you need to send the full HTML - styles, JavaScript, everything - to your DocRaptor request. You can't just send the innerHTML of a specific portion of your web page.

For example, it looks like your web page is using Bootstrap. You'll need to include the HTML for including Bootstrap as well as the specific content you've laid out using Bootstrap.

So we'll need something like: <html><head>...style and script elements...</head><body>...your content here</body></html>

Because DocRaptor's servers don't already provide Bootstrap, jQuery or any other scripts or styles to your documents during generation.

​That make sense?

One other big thing with libraries like Bootstrap is you very often need to set the media type to 'screen' as well, because the default "print" styles from Bootstrap can often strip or override styles: link

​ Common Bootstrap 3 Problems: link

How to fix several common issues that occur with Bootstrap 3?

​ I've also attached a knowledge base article from DocRaptor that should hopefully cover any additional items you may need to address.

Again, let me know if that makes sense, and if there's anything else I can do to help! Happy to do so.

PS: You will need to keep the 'prince_options' and possibly 'javascript' portions of your configuration options in your request to DocRaptor. Looks like you don't have the 'media' line commented out, but the 'media' property needs to be nested within 'prince_options' in order to work.

Upvotes: 2

Related Questions