使用jQuery在更新后打印外部页面(即收据)


Printing an external page after updating (i.e. a receipt) using jQuery

我有一个正在开发的POS系统。到目前为止,我可以让它在页面上显示特定项目,保留所选项目的日志以供购买,存储和检索数据库中的数据,并将销售数据发送到另一个页面。

但是,我希望能够打印另一页。

我将如何做到这一点?

这是将数据发送到收据页面的函数:

// Prints receipt
printReceipt: function()
{
    var $company = "Foo",
        $address = "Bar Avenue",
        $phone = '01234 567890',
        $date = new Date(Date.now()).toLocaleString(),
        $items = ["Foo", "Bar", "Baz", "Qux"],
        $total = 19.97;
    $.post("receipt.php", {company: $company, address: $address, phone: $phone, date: $date, items: $items, total: $total}).done(function()
    {
        /* Print receipt */
    });
},

这是它接收此数据并将其显示在收据中的地方.php:

<?php
    $company = $_POST['company'];
    $address = $_POST['address'];
    $phone = $_POST['phone'];
    $date = $_POST['date'];
    $items = $_POST['items'];
    $total = $_POST['total'];
    echo "<div id='variables' company='$company' address='$address' phone='$phone' date='$date' items='$items' total='$total'></div>";
?>
<div id='company'>Company</div><br>
<div id='address'>Address</div><br>
<div id='phone'>Phone</div><br>
<ul id='items'><li>Items</li></div>
<p></p>
Thank you
<p></p>
<div id='total'>Total</div>
<div id='date'>Date/Time</div><br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $('#company').html($('#variables').attr('company'));
    $('#address').html($('#variables').attr('address'));
    $('#phone').html($('#variables').attr('phone'));
    $('#date').html($('#variables').attr('date'));
    $('#total').html($('#variables').attr('total'));
    $('#vat').html($('#variables').attr('vat'));
    // Empties <ul> and then populates with array
    $('#items').html("");
    for (var item in $('#variables').attr('items'))
    {
        $('#items').append('<li>' + item + '</li>');
    }
</script>

使用jQuery,在发送数据后,我将如何打印出来?

另外,为了将来参考,我如何删除打印提示,以便它立即打印?

您需要将

收据生成的代码注入当前页面(发出 post ajax 请求的代码),然后调用window.print();

// Prints receipt
printReceipt: function()
{
    var $company = "Foo",
        $address = "Bar Avenue",
        $phone = '01234 567890',
        $date = new Date(Date.now()).toLocaleString(),
        $items = ["Foo", "Bar", "Baz", "Qux"],
        $total = 19.97;
    $.post("receipt.php", {company: $company, address: $address, phone: $phone, date: $date, items: $items, total: $total}).done(function(data)
    {
        /* Inject receipt code and ask for print */
        $('body').html(data);
        window.print();
    });
},

小心你receipt.php文件,你正在使用$_POST变量而不保护它们。为什么不直接使用PHP数据到HTML中,而不是使用javascript?

<?php
    $company = strip_tags($_POST['company']);
    $address = strip_tags($_POST['address']);
    $phone = strip_tags($_POST['phone']);
    $date = strip_tags($_POST['date']);
    $items = $_POST['items'];
    $total = strip_tags($_POST['total']);
?>
<div id='company'><?php echo $company; ?></div>
<div id='address'><?php echo $address; ?></div>
<div id='phone'><?php echo $phone; ?></div>
<ul id='items'><?php 
    foreach($items as $index => $item) {
    ?><li id="item-<?php echo $index; ?>"><?php echo strip_tags($item); ?></li><?php
    } 
?></ul>
<p>Thank you</p>
<div id='total'><?php echo $total; ?></div>
<div id='date'><?php echo $date; ?></div><br>