javascript 如何使用javascript打印图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8443758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 03:28:18  来源:igfitidea点击:

How to print an image using javascript

javascriptasp.netimageprinting

提问by user982119

I am trying to print an ASP.NET Imageusing the example here.

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

When I use the above example for a div, it works, but I can't adapt it to print anything else. How can I get it to print an Image? Do I wrap the Imagein a div and change the ".text()" part in the script to something else?

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

回答by Saeed Neamati

Because you're passing a wrong parameter to the printing function. Printing something in JavaScript is as easy as calling window.print();method. To test it, simply use developer toolsof your browser and write into its console:

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

window.print();

Now, when you want to print something specific, you have two ways:

现在,当你想打印一些特定的东西时,你有两种方法:

  1. Create a special stylesheet for printing in the same page, which hides other elements and only shows your specified region.
  2. Or, open a new window, copy what you want there, then print it.
  1. 创建用于在同一页面中打印的特殊样式表,该样式表隐藏其他元素并仅显示您指定的区域。
  2. 或者,打开一个新窗口,复制您想要的内容,然后打印出来。

Now, what you can do is to write your own function:

现在,您可以做的是编写自己的函数:

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

and you can also see this function in action here.

您还可以在此处查看此功能的运行情况。

Just let the browser open popup, and also note that I only pass the srcvalue of the image element to the new window.

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

回答by Sajin

Yes.

是的。

The following java script will help you to print an image in image control.

以下 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;

回答by abasan

this is better solution that also work fine in google 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);

回答by Ahmed Nuaman

Yep, instead of using .text(), you use .html()where you pass the <img />(including the source of course) to the fake document ready for print.

是的,不是使用.text(),而是使用.html()<img />(当然包括来源)传递给准备打印的假文档的位置。

回答by DmitryK

Why not just make it this simple?

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

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

and then call Popup like this: Popup(elem);

然后像这样调用 Popup: Popup(elem);

(you don't really need this Popup() function if you pass an image to print like this)

(如果你像这样传递图像来打印,你真的不需要这个 Popup() 函数)