如何使用javascript打印图像答案

【问题标题】：How to print an image using javascript如何使用javascript打印图像
【发布时间】：2012-01-16 15:26:14
【问题描述】：

我正在尝试使用示例 here 打印 ASP.NET Image。

当我将上面的示例用于 div 时，它可以工作，但我无法调整它来打印其他任何内容。我怎样才能让它打印Image？我是否将Image 包装在一个 div 中并将脚本中的“.text()”部分更改为其他内容？

【问题讨论】：

【解决方案1】：

因为您向打印函数传递了错误的参数。在 JavaScript 中打印内容就像调用 window.print(); 方法一样简单。要对其进行测试，只需使用浏览器的开发者工具并写入其控制台：

window.print();

现在，当您想要打印特定内容时，您有两种方法：

为在同一页面中打印创建一个特殊的样式表，它隐藏了其他元素并且只显示您指定的区域。
或者，打开一个新窗口，在其中复制您想要的内容，然后打印。

现在，你可以做的是编写自己的函数：

function printImage(image)
{
        var printWindow = window.open('', 'Print Window','height=400,width=600');
        printWindow.document.write('<html><head><title>Print Window</title>');
        printWindow.document.write('</head><body ><img src=\'');
        printWindow.document.write(image.src);
        printWindow.document.write('\' /></body></html>');
        printWindow.document.close();
        printWindow.print();
}

var image = document.getElementById('image');
printImage(image);

您还可以在here 看到此功能。

只要让浏览器打开弹窗，还要注意我只将图片元素的src值传递给新窗口。

【讨论】：

也可以在最后一行添加printWindow.close()，打印后自动关闭窗口。

【解决方案2】：

是的，不是使用.text()，而是使用.html()，将<img />（当然包括源代码）传递给准备打印的假文档。

【讨论】：

试过这个。只是在新窗口中给出文本“null”，而不是图像。尝试使用原始以防 asp.net 图像无法正确呈现

【解决方案3】：

为什么不让它这么简单呢？

<input type="button" value="Print Div" onclick="PrintElem('<img src=myimage.jpg>')" />

然后像这样调用 Popup：弹出（元素）；

（如果您像这样传递图像进行打印，则实际上并不需要此 Popup() 函数）

【讨论】：

【解决方案4】：

是的。

以下 java 脚本将帮助您在图像控件中打印图像。

var printContent = document.getElementById('divImage');
var img = document.getElementById('imgMain');

var windowUrl = 'MyPage.aspx';
var uniqueName = new Date();
var windowName = "MyPage" + uniqueName.getTime();

printWindow = window.open(windowUrl, windowName, 'location=1,status=1,scrollbars=1,width=800,height=600');

printWindow.document.write("<div style='width:100%;'>");
printWindow.document.write("<img id='img' src='" + img.src + "'/>");
printWindow.document.write("</div>");

printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
return false;

【讨论】：

【解决方案5】：

这是更好的解决方案，在谷歌浏览器中也可以正常工作：

   var printWindow = window.open('', 'Print Window', 'height=533,width=800');
        printWindow.document.write('<html><head><title>Print Window</title>');

        printWindow.document.write("<script src='script/jquery-1.11.3.min.js' type='text/javascript'><\/script>");


        printWindow.document.write("<script type='text/javascript'>");

        printWindow.document.write("var DoPrint = false;");
        printWindow.document.write("$(document).ready(function () {");

        printWindow.document.write("DoPrint = true;");

        printWindow.document.write("});");

        printWindow.document.write("<\/script>");


        printWindow.document.write('</head><body ><img src=\'');
        printWindow.document.write(document.getElementById('image').src);
        printWindow.document.write('\' /></body></html>');
        printWindow.document.close();


        function Print() {

            if (typeof printWindow.DoPrint != "undefined" && printWindow.DoPrint == true) {

                clearInterval(PrintintervalNumber);

                printWindow.print();
                printWindow.close();

            }

        }


        PrintintervalNumber = setInterval(Print, 1000);

【讨论】：