javascript - 如何使用 Javascript 打印带有图像的 Html 页面

Question

嗨，

我的应用程序是在 asp.net MVC3 中使用 C#.Net 编码的，我有一个特定的 View ，需要打印其中特定 div 的完整 Html查看。

假设

<div id="Printable_Div" >
    <div>
    <img id="First_Image" src="Source of my Image">
    </div>
    <table>My table data
    </table>
</div>

以下是我尝试过的事情

  var w = window.open();
  w.document.write($("#Printable_Div").html());
  w.print();
  w.close();

我也尝试过使用 jquery printElement.js

$("#Printable_Div").printElement();

还有窗口.print();我还尝试将图像设置为背景

<div style="background-image:My Image"></div>

打印 Html 页面没有任何问题，但问题是，上面尝试的三种方法都没有显示图像。我想打印 ID=Printable_Div 的 Div 中可用的整个 HTML有什么方法可以在打印中显示图像吗？图像标记显示在打印预览中，但不显示图像。

已更新

我还尝试使用以下代码打印整个页面。

<div id="Printable_Div" onclick="Print_Function()">
</div>

Javascript函数

    <script type="text/javascript">
        function Print_Function() {
        window.print();
        }

    </script>

Answer 1

试试这个方法，

<button onclick="window.print();printDiv(document.getElementById('Printable_Div'));">Save as PNG Image</button>