如何使用javascript打印图像

How to print an image using javascript

本文关键字：图像 打印 javascript 何使用      更新时间：2023-09-26

我正在尝试打印ASP。. NET Image

当我将上面的例子用于div时，它可以工作，但是我不能调整它来打印其他任何东西。我怎么能让它打印一个Image ?我包装的Image在一个div和改变"。text()"部分在脚本到别的东西吗?

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

window.print();

现在，当你想打印一些特定的东西，你有两种方式:

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

现在，你能做的就是写你自己的函数:

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);

你也可以在这里看到这个函数的运行

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

可以。

下面的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;

这是更好的解决方案，也工作良好的谷歌chrome:

   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);

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

为什么不这么简单呢?

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

，然后像这样调用Popup:

弹出(elem);

(如果像这样传递图像要打印，则实际上不需要这个Popup()函数)

相关文章：