HTML到pdf导出无效

Question

尝试导出html页面（购物篮）的某个部分无法正常工作。我没有收到错误日志，但页面只是刷新，没有其他任何事情发生。我正在尝试将购物篮导出为pdf并保留一些样式信息，最好以表格格式作为发票

HTML

    <div id="contentStart">
  <!--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"> 
        <!--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--> 
        <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">
    <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="cmd">Generate PDF</button>

Js脚本。

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="assets/templates/default-html5/pdf/html2canvas.min.js"></script>


<script>

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

$('#cmd').click(function () {   


   var pdf= new jsPDF('p','pt','letter');
  pdf.addHTML($('#contentStart')[0], function () {
     pdf.save('Test.pdf');
 });


});

</script>

整个代码。

<button type="button" onclick="window.location='checkout.asp?step=1'" id="vc_ChkButton1" class="btn"><i class="icon-basket"></i> [viewcart_checkout-button]</button>
    <div class="clear"></div>
  </div>
  <form action="shipquote.asp" method="post" name="shipquote" onSubmit="return submitForm();">
    <input type="hidden" name="thispage" value="" />
    <input type="hidden" name="shipping_zip" value="[shipping_zip]" />
    <script type="text/javascript">document.shipquote.thispage.value = window.location.href;</script>
  </form>
  <form action="recalculate.asp" method="post" name="recalculate" id="recalculate">
    <!--START: SHOPPING_CART_SHIPMENT_INFO-->
    <div class="cart-shipment-info"><span>Ship To [name] [address]</span> 
      <!--START: EDITADDRESS-->
      <div class="button left"><a href='edit_shipment.asp?shipmentid=[shipmentid]&action=editaddresses' class="icon-btn icon-btn-edit">Edit Address</a></div>
      <!--END: EDITADDRESS-->
      <div class="clear"></div>
    </div>
    <!--END: SHOPPING_CART_SHIPMENT_INFO-->
    <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>
        <div id="contentStart">
      <!--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"> 
            <!--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--> 
            <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">
        <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>
      </div>
    <div class="clear"></div>
    <!--START: apply_coupon-->
    <div class="applyCoupon pad10 boxShadow">
      <div class="header">
        <h3 class="checkout-headers">[viewcart_coupon-header]</h3>
      </div>
      <input type="text" name="coupon_code" class="txtBoxStyle" size="14" />
      <input type="submit" value="Apply" class="btn" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" />
      <div class="clear"></div>
      <div class="coupon-msg">[viewcart_coupon-message]</div>
      <div class="clear"></div>
    </div>
    <!--END: apply_coupon--> 
    <!--START: ShipQuote-->
    <div class="shipQuote pad10 boxShadow">
      <div class="header">
        <h3 class="checkout-headers">[viewcart_shipping-header]</h3>
      </div>
      <div class="clear"></div>
      <div class="shipquote-location">
        <input type="text" name="shipping_zip" size="14" value="[shipping_zip]" class="txtBoxStyle" id="calculate_shipping_zip" />
        <input type="button" value="Calculate" class="btn" onclick="document.shipquote.shipping_zip.value=document.recalculate.shipping_zip.value;document.shipquote.submit();" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" id="calculate_button_go"/>
      </div>
      <div class="clear"></div>
      <div class="shipquote-msg">[viewcart_shipping-message]</div>
      <div class="clear"></div>
      <!--START: viewcart_ship-->
      <div class="shipquote-result-location">[shipping_city] [shipping_state] [shipping_zip]</div>
      <div class="clear"></div>
      <div class="shipquoteint-action">
        <ul>
          <!--START: Shippers-->
          <li><i class="icon-angle-right"></i> <strong>[OPTION-SHIPPER]</strong> <em>[OPTION-DESCRIPTION]</em> [OPTION-PRICE]</li>
          <!--END: Shippers-->
        </ul>
        <input type="button" class="btn" value="Clear" onclick="document.shipquote.action='shipquote.asp?action=clean';document.shipquote.submit();" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" />
      </div>
      <div class="clear"></div>
      <!--END: viewcart_ship--> 
    </div>
    <!--END: ShipQuote--> 
    <!--START: ShipQuoteInternational-->
    <div class="shipQuoteInt pad10 boxShadow">
      <div class="header">
        <h3 class="checkout-headers">[viewcart_shipping-header]</h3>
      </div>
      <div class="clear"></div>
      <script type="text/javascript" src="state_countryjs.asp"></script> 
      <script type="text/javascript">
        function get_Element(i) {
            return document.getElementById(i) || document.getElementsByName(i).item(0);
        }                               
        function getInternationalQuote() {
            var strAction = "shipquote.asp?shipping_country=" + get_Element("shipping_country").value;
            strAction = strAction + "&shipping_state=" + get_Element("shipping_state").value;
            document.shipquote.action = strAction;

            document.shipquote.shipping_zip.value = document.recalculate.shipping_zip.value
            document.shipquote.submit();
        }
      </script>
      <div class="shipquoteint-location">
        <select name="shipping_country" onchange="this.form.shipping_zip.value='';populateState('shipping_state','shipping_country');" class="txtBoxStyle" id="shipping_country">
        </select>
        <select id="shipping_state" onchange="this.form.shipping_zip.value='';" name="shipping_state" class="txtBoxStyle">
        </select>
        <input type="text" name="shipping_zip" size="14" value="[shipping_zip]" class="txtBoxStyle" id="calculate_shipping_zip" />
      </div>
      <div class="shipquoteint-action">
        <input type="button" value="Calculate" class="btn" onclick="getInternationalQuote();" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" id="calculate_button_go" />
      </div>
      <div class="shipquoteint-msg">[viewcart_shipping-message]</div>
      <div class="clear"></div>
      <!--START: viewcart_ship-->
      <div class="shipquoteint-result-location">[shipping_city] [shipping_state] [shipping_zip]</div>
      <div class="shipquoteint-action">
        <select class="txtBoxStyle">
          <!--START: Shippers-->
          <option><strong>[OPTION-SHIPPER]</strong> <em>[OPTION-DESCRIPTION]</em> [OPTION-PRICE]</option>
          <!--END: Shippers-->
        </select>
        <input type="button" class="btn" value="Clear" onclick="document.shipquote.action='shipquote.asp?action=clean';document.shipquote.submit();" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" />
      </div>
      <div class="clear"></div>
      <!--END: viewcart_ship--> 
    </div>
    <!--END: ShipQuoteInternational-->
    <div class="clear"></div>
    <div class="chk-buttons"> 
      <!--START: savecart-->
      <a href="myaccount.asp?action=save_cart"><i class="icon-export"></i> [viewcart_save-cart]</a>
      <!--END: savecart-->
      <a href="[continue_url]"><i class="icon-left-open"></i> [viewcart_continue-shopping]</a>
      <!--<button type="submit" name="Add" class="btn"><i class="icon-cw"></i> [shoppingcart_updatecart]</button>-->
      <button type="button" onclick="window.location='checkout.asp?step=1'" id="vc_ChkButton" class="btn"><i class="icon-basket"></i> [viewcart_checkout-button]</button>

  <button type="button" id="cmd">Generate PDF</button>

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="assets/templates/default-html5/pdf/html2canvas.min.js"></script>


<script>

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

$('#cmd').click(function () {   


   var pdf= new jsPDF('p','pt','letter');
  pdf.addHTML($('#contentStart')[0], function () {
     pdf.save('Test.pdf');
 });


});

</script>

Answer 1

你说

  

“页面只是刷新”

....好吧，你向我们展示了你的上下文之外的按钮，但是如果它在<form>之内，它默认会导致表格的完整回发。这似乎是该页面刷新的最可能原因。

将HTML更改为

<button type="button" id="cmd">Generate PDF</button>

避免这种情况。

（“type”属性的默认设置是“submit”，当按钮在表单中时会导致回发。）