使用javascript下载div作为PDF的问题？

Question

我正在尝试将特定div下载为PDF但它没有显示div的完整部分。它只显示前两列而不显示div的完整高度和宽度。如何使用div的HTML输出导出完整的div？如果页面直接邮寄到PDF格式的接收器会更好。

我的div看起来像这样

[1]: [https://i.stack.imgur.com/9t012.png][1]

在以pdf导出后，它看起来像这样

[2]: [https://i.stack.imgur.com/eReu9.png][1]

我的代码是，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
 <script type="text/javascript" src="jspdf.min.js"></script>
 <script type="text/javascript">
 function genPDF()
 {
  html2canvas(document.body,{
  onrendered:function(canvas){

  var img=canvas.toDataURL("image/png");
  var doc = new jsPDF();
  doc.addImage(img,'JPEG',20,20);
  doc.save('test.pdf');
  }

  });

  }
  </script>
 <?php if ($this->helper('wishlist')->isAllow()) : ?>
    <div class="my-wishlist">
    <div class="page-title title-buttons">
        <?php if ($this->helper('wishlist')->isRssAllow() && $this->hasWishlistItems()): ?>
            <a href="<?php echo $this->helper('wishlist')->getRssUrl($this->getWishlistInstance()->getId()); ?>" class="link-rss"><?php echo $this->__('RSS Feed') ?></a>
        <?php endif; ?>
        <h1><?php echo $this->getTitle(); ?></h1>
    </div>
    <?php echo $this->getMessagesBlock()->toHtml() ?>

    <form id="wishlist-view-form" action="<?php echo $this->getUrl('*/*/update', array('wishlist_id' => $this->getWishlistInstance()->getId())) ?>" method="post">
        <?php echo $this->getChildHtml('top'); ?>
        <div class="fieldset">
            <?php if ($this->hasWishlistItems()): ?>
                    <?php echo $this->getBlockHtml('formkey');?>
                    <?php $this->getChild('items')->setItems($this->getWishlistItems()); ?>
                    <?php echo $this->getChildHtml('items');?>
                    <script type="text/javascript">decorateTable('wishlist-table')</script>
            <?php else: ?>
                <p class="wishlist-empty"><?php echo $this->__('You have no items in your quote.') ?></p>
            <?php endif ?>
            <div class="buttons-set buttons-set2">
                <?php echo $this->getChildHtml('control_buttons');?>
            </div>
        </div>
    </form>

    <form id="wishlist-allcart-form" action="<?php echo $this->getUrl('*/*/allcart') ?>" method="post">
        <?php echo $this->getBlockHtml('formkey') ?>
        <div class="no-display">
            <input type="hidden" name="wishlist_id" id="wishlist_id" value="<?php echo $this->getWishlistInstance()->getId() ?>" />
            <input type="hidden" name="qty" id="qty" value="" />
        </div>
    </form>

    <script type="text/javascript">
    //<![CDATA[
        var wishlistForm = new Validation($('wishlist-view-form'));
        var wishlistAllCartForm = new Validation($('wishlist-allcart-form'));

        function calculateQty() {
            var itemQtys = new Array();
            $$('#wishlist-view-form .qty').each(
                function (input, index) {
                    var idxStr = input.name;
                    var idx = idxStr.replace( /[^\d.]/g, '' );
                    itemQtys[idx] = input.value;
                }
            );

            $$('#qty')[0].value = JSON.stringify(itemQtys);
        }

        function addAllWItemsToCart() {
            calculateQty();
            wishlistAllCartForm.form.submit();
        }
    //]]>
    </script>

</div>
<a href="javascript:genPDF()">Download PDF</a>
<?php echo $this->getChildHtml('bottom'); ?>
<div class="buttons-set">
    <p class="back-link"><a href="<?php echo $this->escapeUrl($this->getBackUrl()) ?>"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
</div>
<?php endif ?>

提前致谢

这是我想要导出的确切div

 <div class="my-wishlist">
<div class="page-title title-buttons">
    <?php if ($this->helper('wishlist')->isRssAllow() && $this->hasWishlistItems()): ?>
        <a href="<?php echo $this->helper('wishlist')->getRssUrl($this->getWishlistInstance()->getId()); ?>" class="link-rss"><?php echo $this->__('RSS Feed') ?></a>
    <?php endif; ?>
    <h1><?php echo $this->getTitle(); ?></h1>
</div>
<?php echo $this->getMessagesBlock()->toHtml() ?>

<form id="wishlist-view-form" action="<?php echo $this->getUrl('*/*/update', array('wishlist_id' => $this->getWishlistInstance()->getId())) ?>" method="post">
    <?php echo $this->getChildHtml('top'); ?>
    <div class="fieldset">
        <?php if ($this->hasWishlistItems()): ?>
                <?php echo $this->getBlockHtml('formkey');?>
                <?php $this->getChild('items')->setItems($this->getWishlistItems()); ?>
                <?php echo $this->getChildHtml('items');?>
                <script type="text/javascript">decorateTable('wishlist-table')</script>
        <?php else: ?>
            <p class="wishlist-empty"><?php echo $this->__('You have no items in your quote.') ?></p>
        <?php endif ?>
        <div class="buttons-set buttons-set2">
            <?php echo $this->getChildHtml('control_buttons');?>
        </div>
    </div>
</form>

<form id="wishlist-allcart-form" action="<?php echo $this->getUrl('*/*/allcart') ?>" method="post">
    <?php echo $this->getBlockHtml('formkey') ?>
    <div class="no-display">
        <input type="hidden" name="wishlist_id" id="wishlist_id" value="<?php echo $this->getWishlistInstance()->getId() ?>" />
        <input type="hidden" name="qty" id="qty" value="" />
    </div>
</form>

<script type="text/javascript">
//<![CDATA[
    var wishlistForm = new Validation($('wishlist-view-form'));
    var wishlistAllCartForm = new Validation($('wishlist-allcart-form'));

    function calculateQty() {
        var itemQtys = new Array();
        $$('#wishlist-view-form .qty').each(
            function (input, index) {
                var idxStr = input.name;
                var idx = idxStr.replace( /[^\d.]/g, '' );
                itemQtys[idx] = input.value;
            }
        );

        $$('#qty')[0].value = JSON.stringify(itemQtys);
    }

    function addAllWItemsToCart() {
        calculateQty();
        wishlistAllCartForm.form.submit();
    }
//]]>
</script>

</div>