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

Question

你好，

我的应用程序在用C#.Net编码的 asp.net MVC3中，我有一个特定的视图，需要在该视图中打印特定 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();

还有 window.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>

score -1 · Accepted Answer

试试这个方法，

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

1 回答 1