欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

前端实现浏览器打印、打印预览功能

最编程 2024-04-25 12:45:53
...
// 在/public的index.html中引入print插件 <script src="/js/jQuery.print.min.js"></script> // Print.vue <template> <div id="print-details"> <div id="prints" > // 打印内容 /div> <div @click="printBtn" >打印</div> </div> </template> <script> // …… methods: { printBtn(){ let _this = this; setTimeout(()=>{ $("#prints").print({ /*options*/ globalStyles: true, mediaPrint: false, stylesheet: null, noPrintSelector: ".no-print", iframe: true, append: null, prepend: null, manuallyCopyFormValues: true, timeout: 750, title: null, doctype: '<!doctype html>', deferred: $.Deferred().done(function(){ // window.onbeforeprint(); // window.onafterprint(); // 打印弹框关闭后自动返回订单列表 _this.goBack(); })//回调函数 }); }, 300) }, } // …… </script> <style lang="scss"> /* 样式将只应用于打印 */ @media print { .content-title{ width: 100%; display: flex; justify-content: space-between; padding: 0 8px; } .content-bar-name{ display: flex; justify-content: space-between; background: #FFF; padding: 0 10px; font-size: 16px; } } </style>

推荐阅读