使用 jquery 多图像选择和打印选定的图像

Question

我有如下图像集 div 标签：

function printImg() {

  pwin = window.open(document.getElementById("mainImg").src,"_blank");

  window.print();

}

$(function () {

    $("#gallery > img").click(function () {

        if ($(this).data('selected')) {

        $(this).removeClass('selected');

        $(this).data('selected', false);

    } else {

        $(this).addClass('selected');

        $(this).data('selected', true);

    }

    });

    var selectedImageArray = [];

$('#gallery > img').each(function () {

    if ($(this).data('selected')) {

        selectedImageArray.print(this);

    }

});

 window.onafterprint = function(){

      window.location.reload(true);

 }

});

img.selected {

    border: 3px solid green;

}

img:hover {

    cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gallery" id="gallery">

<img name=imgqr[] id="mainImg" src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(180)->generate($user->emp_code[$i])) !!} " width="100"; height="80"; >{{$user->emp_first_name}}&nbsp;{{$user->emp_last_name}}&nbsp;{{!!($user->dpt_name)!!}}</td></tr>                             

 </div>

<input  class="printMe" type="button" onclick="printImg()" value="printMe" />

当用户单击它时，我需要选择图像，我为此添加了脚本并且它可以工作，但是我单击打印按钮它不打印 qrcode 图像，同时正在打印整个页面。

我还需要检查是否选择了图像并通过数组值打印选择的图像+数据名称。

Answer 1

您在主窗口上调用 print，从您打开的窗口调用 printfunction printImg() {&nbsp; pwin = window.open(document.getElementById("mainImg").src,"_blank");&nbsp; pwin.print();}

Answer 2

Window.print() 将始终打印整个当前窗口。您可以通过将所选图像添加到弹出窗口然后打印该弹出窗口来绕过此操作。popup = window.open();popup.document.write("imagehtml");popup.focus(); //required for IEpopup.print();您可以为一张照片在一个窗口中执行此操作，但当然您也可以将多张照片添加到一个屏幕上然后打印。您的第二个问题要求包含所选图像的数组。因为您使用 jQuery，所以您可以通过allSelectedImages = $('.selected');您可以循环该数组并在其上调用函数 .data() 以获取所有数据属性！希望这可以帮助！

Answer 3

我不认为您的代码有任何问题，试试这个，让我知道火狐：谷歌浏览器：