前端实现浏览器打印网页

改变打印区域的大小，宽度一般为980px，宽度太大会溢出.printElement.style.width="980px"优缺点优点：不难改。缺点：涉及的位置比较多，这种行为太蠢，不够优雅。方案二：将元素追加到iframe中进行渲染打印。获取要打印的元素，然后通过innerHtml获取元素，然后把html字符串写入iframe，然后把需要的样式都写进去。constprintId='print-element-id';constprintElement=document.querySelector(printId)constprintElementHtml=printElement.innerHtmlconstiframe=document.createElement('iframe')iframe.setAttribute('style','你的风格，你可以从css文件下载')document.appendChild(iframe)iframe.contentWindow.document.body.innerHtml=printElementHtml;//调用printiframe.contentWindow.print()iframe.contentWindow.print()优缺点变化不大并且可以有针对性。但是样式容易出现问题，需要调整。一些依赖js自适应宽度可能会导致打印不全。方案三：直接在iframe中建TABLE渲染。个人推荐既然目标是打印报表，那么可以专注于报表。无需担心是否与网页一致。只要能按照表格打印出来，目的就达到了。当然，如果产品需要保持一致，那就看能不能沟通好，如果不行就选择上面的方案。核心是结合第二种方案，使用自定义表格简化样式，达到打印完整的目的。constdata=[{"name":"马磊","email":"o.biayajolg@xkic.pe","id":"EfFACeD4-51d8-43B5-E9Bf-FFEB361dc5a4","age":18,"phone":"19864717125","address":"活动将使民主党标明正确的日期。","user":"75FD6371-4c3D-ED90-DD15-F0EA6fD7b942","create_at":"2005-08-25PM18:35:14","update_at":"1983-12-28AM00:47:25"},{"name":"ChengGang","email":"m.rvvvzvojp@ofrozu.hn","id":"912C1FF4-6CeA-8489-b2D8-2d5FFA816F6b","age":97,"phone":"19838636737","address":"第三次约拉泽办公室的电话还有宝塑万智。","user":"94754927-94cf-a7e5-aBe7-3A23112BC8f5","create_at":"1988-08-04PM17:26:51","update_at":"2008-05-26AM08:33:42"},];//代码不完整，[伪代码]，代码的一般行为：从数据创建表consttable=document.createElement('table')data.forEach(item=>{consttr=document.createElement('tr')table.appendChild(tr);Object.keys(item).forEach(item=>{consttd=document.createElement('td')tr.appendChild(td)});});constiframe=document.createElement('iframe')iframe.setAttribute('style','你的样式可以从css文件下载')document.appendChild(iframe)//改成html这里表格的代码，当然可以考虑自己改AppendChildelementiframe.contentWindow.document.body.innerHtml=table.innerHtml;//调用打印iframe.contentWindow.print()第三方插件但是它实际项目中没必要那么难自己实现，有一个很完整的框架可以完成上面的能力也很简单print-js调用：printJS({documentTitle:'test',header:'tabletitle',type:'json',properties:[{field:'id',displayName:'number'},{字段:'na我',displayName:'name'},{field:'age',displayName:'age'},{field:'phone',displayName:'phonenumber'},{field:'address',displayName:'address'},{field:'email',displayName:'mailbox'},{field:'address',displayName:'address'},{field:'user',displayName:'usernumber'},{field:'create_at',displayName:'创建时间'},{field:'update_at',displayName:'更新时间'},],printable:[{"name":"马磊","email":"o.biayajolg@xkic.pe","id":"EfFACeD4-51d8-43B5-E9Bf-FFEB361dc5a4","age":18,"phone":"19864717125","address":"活动日期为民主党标志平行线","user":"75FD6371-4c3D-ED90-DD15-F0EA6fD7b942","create_at":"2005-08-25PM18:35:14","update_at":"1983-12-28AM00:47:25"},{"name":"ChengGang","email":"m.rvvvzvojp@ofrozu.hn","id":"912C1FF4-6CeA-8489-b2D8-2d5FFA816F6b","age":97,"phone":"19838636737","address":"夜落泽的三次来电者也是宝宝素万志老。","user":"94754927-94cf-a7e5-aBe7-3A23112BC8f5","create_at":"1988-08-04PM17:26:51","update_at":"2008-05-26AM08:33:42"},],})小尾巴我的博客：https://www.notbucai.com/