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

Posted 2023-05-08

【中文标题】使用 jquery 多图像选择和打印选定的图像

【英文标题】：multi image select and print selected images using jquery

【发布时间】：2020-04-24 02:50:49

【问题描述】：

我有如下图像集 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])) !! " ; ; >$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" />

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

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

【问题讨论】：

您是否尝试过配置页面设置以进行打印？

我想我没有@MohsenNewtoa

你能解释清楚吗@MohsenNewtoa

为什么不使用 qrCode 库而不是 PNG？

我已经使用了二维码库（简单的二维码），而 png 只是生成 png 图像，这就是我使用它的原因@MohsenNewtoa

【参考方案1】：

Window.print() 将始终打印整个当前窗口。您可以通过将所选图像添加到弹出窗口然后打印该弹出窗口来绕过此操作。

popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();

您可以为一张照片在一个窗口中执行此操作，但当然您也可以将多张照片添加到一个屏幕上然后打印。

您的第二个问题要求包含所选图像的数组。因为你使用 jQuery，你可以通过

allSelectedImages = $('.selected');

您可以循环该数组并在其上调用函数 .data() 以获取所有数据属性！

希望这会有所帮助！

【讨论】：

它对我不起作用，你提到的第一个答案，什么都不打印，第二个可以更清楚地解释它。

【参考方案2】：

你在主窗口调用 print，从你打开的窗口调用 print

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

【参考方案3】：

我不认为你的代码有什么问题，

试试这个然后告诉我

火狐：

---

谷歌浏览器：

【讨论】：

嗨，这不是我要找的，我想我描述得不是很好。我想使用多选或类似的方式选择特定图像