javascript - 在网页中打印多个选定的图像

Question

我的问题是我正在为 friend 设计网站。我所做的是设置一个缩略图列表，每个缩略图下面都有一个按钮，可以在新窗口中打开相应的图像，打印它，然后关闭窗口。现在他决定在缩略图旁边添加复选框，选中后单击按钮将打印所有选中的图像。这可能吗？如果是这样，有人可以向我解释一下吗？感谢您的宝贵时间。

Answer 1

在许多可能的方法中，这是您可以执行此操作的一种方法:

第一步:创建一个围绕所有内容并在表单内部的表单，在每个图像旁边或下方放置一个具有唯一 ID 的复选框，我们可以使用它来识别它是哪个，例如

<input type="checkbox" id="imageNumber3"/>

只是为了以后您可以使用 id 来判断所指的图像。继续阅读 forms and check boxes .

第二步:制作一个javascript函数来获取当前选中的复选框

function getChecked(form) {
    var names;
    var c = document.getElementById(form).getElementsByTagName('input');
    for (var i = 0; i < c.length; i++) {
        if (c[i].type == 'checkbox' && c[i].checked) {
             names.append(c[i].id);
        }
    }
    return names;
}

此函数应该在您为其提供复选框所在表单的 ID 时，遍历并检查每个框以查看是否已选中。它将构建一个已选择的 ID 数组并返回该数组。

第三步:像这样单击按钮时调用新的打印函数

function printBunch(ids) {
    var windowUrl = 'about:blank';
    var uniqueName = new Date();
    var windowName = 'Print' + uniqueName.getTime();

    var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

    for(id in ids) {
        //assuming the image will be the next sibling of the checkbox
        var currentImage = document.getElementById(id).nextSibling.innerHTML;
        printWindow.document.write(currentImage);
    }
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
 }

然后为按钮的 onclick 放置“printBunch(getChecked());”传递选中图像的 ID。您可能需要更改一些代码，具体取决于您如何设置与复选框相关的图像，但这应该可以帮助您入门。