如何通过onclick打印特定图像答案

【问题标题】：how to print a specific image through onclick如何通过onclick打印特定图像
【发布时间】：2020-05-31 17:52:20
【问题描述】：

当我在同一个 div class="imgcontainer" 中单击 img class="print" 时，我需要能够仅打印出图像 class="main"，因此分别打印了三个单独的图像。

HTML

            <div id="printables">
                <div class="imgcontainer">
                    <img class="main" src="assets/printables/Header Ipad.jpg">
                    <img class="print" src="assets/print.png">
                    <a href="assets/printables" download>
                        <img class="download" src="assets/download.png">
                    </a>
                </div>
                <div class="imgcontainer">
                    <img class="main" src="assets/printables/Milestones Chart.jpg">
                    <img class="print" src="assets/print.png">
                    <a href="assets/printables/Milestones Chart.jpg" download>
                        <img class="download" src="assets/download.png">
                    </a>
                </div>
                <div class="imgcontainer">
                    <img class="main" src="assets/printables/FinancialRuler Diagram.jpg">
                    <img class="print" src="assets/print.png">
                    <a href="assets/printables/FinancialRuler Diagram.jpg" download>
                        <img class="download" src="assets/download.png">
                    </a>
                </div>
            </div>

【问题讨论】：

标签： html jquery css

【解决方案1】：

您可以尝试以下方法打印图像：

 $("img.print").on("click", function() {
    let mainImage = $(this).prev(".main").attr("src"); 
    ImagePrint(mainImage);
 });

 function ImageSourcetoPrint(source) {
    return "<html><head><script>function step1(){\n" +
   "setTimeout('step2()', 10);}\n" +
   "function step2(){window.print();window.close()}\n" +
   "</scri" + "pt></head><body onload='step1()'>\n" +
   "<img src='" + source + "' /></body></html>";
 }

 function ImagePrint(source) {
   Pagelink = "about:blank";
   var pwa = window.open(Pagelink, "_new");
   pwa.document.open();
   pwa.document.write(ImageSourcetoPrint(source));
   pwa.document.close();
 }

此解决方案取自here。

【讨论】：

对不起，我不太清楚打印是否更容易我的意思是让图片显示为可以打印出来的东西，而不是附加。有可能吗？
@LimHanYang 抱歉造成误会。我刚刚更新了我的答案。
谢谢你的帮助，真的很感激，代码就像一个魅力。
@LimHanYang 很高兴我能帮上忙 :)