js浏览器预览实现打印,改变预览是的UI 的需求。

119 阅读1分钟

前言

现在都说前端已死,我是否能够跨越这个冬天。

1.创建iframe

 var iframe = document.createElement("IFRAME");
     iframe.setAttribute(
       "style",
       "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
     );
     document.body.appendChild(iframe);
     var doc = iframe.contentWindow.document;

2.创建HTML

// 实践证明 doc.innerHTML = '要打印的html内容';这种写法是不行的
     // doc.innerHTML = '要打印的html内容';
     //需要用;
     var html=``

3.渲染html,及后续操作

  doc.write(html);
       iframe.contentWindow.focus();
       iframe.contentWindow.print();
       document.body.removeChild(iframe);

总结

其实实行很简单,主要就是一些数据处理和数据绑定处理