Exporting html div to pdf with css styling

Question

I have a shopping cart that i want someone to be able to download a fairly well format pdf from. At the moment in prints the item names, but if i want to include the prices etc it fails. Is there anyway to also add the pdf data to a table, to make it look a little neater? Or is there a way of being able to save the item names and prices in a hidden array and then output this to the pdf?

Shopping cart code

<div class="shoppingCartItems" id="shoppingCartItems">
  <div class="titles2">
    <div class="item-info">[shoppingcart_items]</div>
    <div class="item-qty">[shoppingcart_quantity]</div>
    <div class="item-price">[shoppingcart_price]</div>
    <div class="item-total">[shoppingcart_total]</div>
    <div class="item-remove">&nbsp;</div>
    <div class="clear"></div>
  </div>

  <!--START: SHOPPING_CART_ITEM-->
  <div class="row">
    <div class="item-info">
      <div class="product-image"><!--START: itemthumbnail--><a href="product.asp?itemid=[ITEM_CATALOGID]"><img src="thumbnail.asp?file=[THUMBNAIL]" height="55" width="55" /></a><!--END: itemthumbnail--><!--START: thumbnailnolink--><img src="thumbnail.asp?file=[THUMBNAIL]" height="55" width="55" id="tnl" /><!--END: thumbnailnolink--></div>
      <div class="product-name-options"> 
           <div id="contentStart">
        <!--START: itemnamelink--><a id="itemName" class ="itemName" href="product.asp?itemid=[ITEM_CATALOGID]">[ITEM_NAME]</a><!--END: itemnamelink--> 
        <!--START: itemnamenolink--><span id="spnItemName">[ITEM_NAME]</span><!--END: itemnamenolink--> 
        <!--START: itemoptions--> 
          </div>
        <br />
        <a href='#' onclick="toggle('opt[ITEM_ID]')">View/Hide options</a><br />
        <div id=opt[ITEM_ID] name=opt[ITEM_ID] style="display:none;">[OPTIONS]</div>
        <!--END: itemoptions--> 
        <!--START: recurring_frequency-->
        <div class="recurring_frequency">This item will Autoship every <strong>[recurring_frequency]</strong></div>
        <!--END: recurring_frequency--> 
        <!--START: giftwraplink-->
        <div class="giftwraplink"> <a onclick="showGiftWrap('[ITEM_ID]')">[giftwrap_link]</a> </div>
        <!--END: giftwraplink--></div>
      <div class="clear"></div>
    </div>
    <div class="item-qty">
      <input type="text" name="qtyitemnum" value="[ITEM_QUANTITY]" size="3" maxlength="5" class="txtBoxStyle" />
      <input type="hidden" name="coliditemnum" value="[ITEM_ID]" size="3" maxlength="5" />
        <div id="itemQty">
      <a href="#" onclick="document.forms['recalculate'].submit();return false;" class="update-qty">[shoppingcart_updatecart]</a>
            </div>
    </div>
    <div class="item-price" id="itemPrice">[ITEM_PRICE] </div>
    <div class="item-total">[ITEM_SUBTOTAL]</div>
    <div class="item-remove"><a href="#" onclick="document.recalculate.qtyitemnum.value=0;document.recalculate.submit();"><i class="icon-cancel"></i></a></div>
    <div class="clear"></div>
  </div>
  <!--END: SHOPPING_CART_ITEM-->
  <div class="shoppingCartTotal" id="totalCartPdf">
    <div class="clear">&nbsp;</div>
    <div class="item-total">[CARTSUBTOTAL]</div>
    <div class="item-price">[shoppingcart_subtotal]</div>
    <div class="clear"></div>
    <!--START: DISCOUNTS-->
    <div class="clear">&nbsp;</div>
    <div class="item-total">[DISCOUNTS]</div>
    <div class="item-price">[checkout1_discounts]</div>
    <div class="clear"></div>
    <!--END: DISCOUNTS-->
    <div class="clear">&nbsp;</div>
    <div class="item-total"><strong>[CARTTOTAL]</strong></div>
    <div class="item-price"><strong>[shoppingcart_total]</strong></div>
    <div class="clear"></div>
  </div>

  </div>
  <button id="submit1">Export to  PDF</button>

js

  $(document).on('click', '#submit1', function() {

         var doc = new jsPDF(); 
var specialElementHandlers = { 
    '#editor': function (element, renderer) { 
        return true; 
    } 
};


    //I dont know what remove was is the example, added quotes around it.
    console.log("clicked");
    doc.fromHTML($('#contentStart').html(), 15, 15, { 
        'width': 190, 
            'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-page.pdf'); 
})

;

Answer 1

Using something like paper-css and in practice you'd have a file like template.html on the backend.

When the user clicks the button:

1. You send the data that needs to be printed to your API endpoint on the backend.
2. Validate that the request was made by a user on the website, maybe with csrf or session information.
3. Sanitize any user input.
4. Inject the data into the template.
5. Generate the PDF (as suggested in the readme with electron-pdf) .
6. Respond with the newly created file.
7. Finally and on the front end after receiving the successful response, you would prompt the user to download the file within their browser client.

Take a look at the docs on jsPDF too as it would likely be a more simple but less diverse option which would enable you to deal with this on the front end using some HTML5 magic.

There are others too search this site or your favorite search engine for more info on those.

Bear in mind though, not all browsers fully support HTML5 so trying to do this on the front end is not exactly the best option at this point in time.