Question

我有一个购物车，我希望有人能够从中下载相当好的格式pdf。目前在打印项目名称，但如果我想包括价格等失败。无论如何还要将pdf数据添加到表格中，使其看起来更整洁一些吗？或者有没有办法将项目名称和价格保存在隐藏数组中，然后将其输出到pdf？

购物车代码

<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

使用类似paper-css的内容，在实践中，您在后端有一个类似template.html的文件。

当用户点击按钮时：

您将需要打印的数据发送到后端的API端点。
验证请求是由网站上的用户发出的，可能是csrf或会话信息。
Sanitize任何用户输入。
将数据注入模板。
生成PDF（如自述文件electron-pdf中所示）。
回复新创建的文件。
最后，在收到成功回复后的前端，您会提示用户在浏览器客户端中下载文件。

请查看jsPDF上的文档，因为它可能是一个更简单但不太多样化的选项，可以让您使用HTML5魔法在前端处理此问题。

还有其他人也会搜索此网站或您最喜欢的搜索引擎以获取更多信息。

请记住，并非所有浏览器都完全支持HTML5，因此尝试在前端执行此操作并不是此时的最佳选择。

使用css样式将html div导出为pdf

1 个答案: