前端打印

前端js实现打印的几种方式

一、基本原理

利用window对象自带的print方法，将当前窗口内展示的内容打印出来。这里的window包括以下几种情况：

1. 当前默认的全局window对象.

2. 调用window.open方法返回的window对象.

3. iframe下的contentWindow对象.这个很好理解，contentWindow会继承window对象的方法和属性,因此也可以使用print方法.

二、实现方式

---

方法1：

要实现打印其实非常简单，只需要调用window.print()就可以将当前页面内容打印出来。当然打印出来内容和排版取决于当前页面中展示的内容和样式。代码示例如下：

var printContent = `<span>这里是打印内容</span><img src="url">` 

document.body.innerHtml = printContent;// 将window内容赋为当前要打印的内容(一般是比较复杂的表单等样式)

这样实现起来比较简单易懂，但是会有一个比较严重的问题。用户往往只是想打印页面内某部分的功能，并不想改变当前页面展示的内容。为了解决这种用户体验问题你需要变通一下，将打印之前的页面内容先保存一下。

var targetContent = document.getElmentById("targetDom").innnerHtml; // 打印内容

var oldContent = document.body.innerHtml; // 打印前页面内容

document.body.innerHtml = targetContent;

window.print();

document.body.innerHtml = oldContent; //恢复打印前页面内容

这种方式基本满足了我们的需求，打印之后用户看到的还是之前展示的内容。当然，打印时页面难免会闪一下。

---

方法2：

建立在方式一的基础上我们会考虑，既然所有的window对象都有print方法，而调用当前window下的print方法又总需要将打印前的内容保存起来（这个内容有可能会很多，某些情况下我们其实并不希望触发页面的重新渲染）。既然如此，或许我们可以试试创建一个新的window对象。

var printWindow = window.open(url,'windowName', 'height=300, width=700,
top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no,
location=n o, status=no');

printWindow .print();

以上方法能帮助我们实现打印指定url地址中的内容。当然，这也需要我们预先将要打印的内容渲染在该url对应的页面中。

方法3：

在尝试过第二种打印方式后你会发现，其实在打印时平白无辜的为用户打开一个新的页面也会让人觉得不爽，最好的方式应该是页面不做任何变化并且能够实现打印我们想要的打印内容。如果是这样的诉求的话，直接使用window.print是不再可靠的。不过好在iframe也是支持print方法的，这为我们提供了很多方便.

function print (contentHtml){ // 传入要打印的内容

var iframe = document.createElement("IFRAME");

// 隐藏iframe,只使用其打印功能
iframe.setAttribute('style', 'overflow:hidden;width:0px;height:0px; ');

document.body.appendChild(iframe);

var doc = iframe.contentWindow.document;

doc.write(contentHtml); //要打印区域中写入要打印内容

doc.close(); // 某些浏览器中不关闭该区域的话无法调用print方法

iframe.contentWindow.focus();

iframe.contentWindow.print();

document.body.removeChild(iframe); 

}

方法4：

如果你觉得以上几种方式都不是你想要的，没关系，我们有基于jquery的更加强大稳定的打印插件 – jqprint.js

<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.jqprint-0.3.js"></script>
HTML代码
<div id="ddd">
    <table>
        <tr>
            <td>这是打印的内容1</td>
            <td>这是打印的内容2</td>
            <td>这是打印的内容3</td>
            <td>这是打印的内容4</td>
            <td>这是打印的内容5</td>
        </tr>
    </table>
</div>

调用打印代码:

$("#ddd").jqprint();

关于jqprint插件使用更加详细的说明可以查看此链接:
jq打印插件之jqprint,在此我们就不再赘述了.

三、总结

对比一下几种实现方式，个人比较倾向推荐使用iframe和jqprint来实现，从灵活性上来说iframe会更好一点，兼容性上来看的话jqprint明显会更好一点。