在網頁上打印多個選定圖像

我的問題是我正在爲朋友設計一個網站。我所做的是設置一個縮略圖列表，每個縮略圖下方都有一個按鈕，可以在新窗口中打開相應的圖像，打印它並關閉窗口。現在他決定他希望在縮略圖旁邊的複選框被選中時，單擊按鈕將打印所有選定的圖像。這可能嗎？如果是這樣，有人可以向我解釋嗎？謝謝你的時間。在網頁上打印多個選定圖像

來源

2012-06-14 Brandon L. Collins

當然這是可能的 - 任何你可以想象的是。但是這個問題很普遍，沒有看到你已有的代碼，任何人都很難幫助你。 – hackartist

我認爲是這樣的：D簡而言之，我在160x160圖像的網格中的每個圖像下都有一個按鈕，並且在onClick按鈕中，它只是使用較大版本的圖像加載一個html頁面。在這個頁面上有一個window.print（）;和window.close（）;功能在身體標籤。這也正是他想要的方式。但是現在他希望它在每幅圖像旁邊都有一個複選框，並且一箇中央打印按鈕可以將所選大圖像並排放入一個新頁面，並將它們全部打印在該頁面上。 –

這裏是你可以做的多種可能的方式這樣一種方式：

一步一個：使周圍的一切，並在表單內的表單，旁邊或每個圖像下方放一個複選框和唯一的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。您可能需要更改一些代碼，具體取決於您如何設置與複選框相關的圖像，但這會讓您開始。

來源

2012-06-14 21:02:22 hackartist

非常感謝。我會放棄並報告。 –

在網頁上打印多個選定圖像

回答

相關問題