vue-print-nb使用
- 安装 vue-print-nb
npm install vue-print-nb --save
- 在main.js中引入
// main.jsimport Print from'vue-print-nb'
Vue.use(Print)
- 使用 vue-print-nb
// 打印按钮绑定 printObj<el-button v-print="printObj">打印</el-button>
// 在数据data中添加printObj:{id:'print',popTitle:'',// 打印配置页上方标题extraCss:'',// 打印可引入外部的一个 css 文件......// 其他配置项或钩子函数可参考官方 https://www.npmjs.com/package/vue-print-nb},
// 被打印的容器<div id="print">这块内容将会被打印</div>
解决打印element表格不全问题
- 因为需要修改源码，所以直接拷贝以下文件，放到项目的assets目录下（将node_modules/vue-print-nb/print文件拷贝至项目中，不一定要assets目录，想放哪放哪，下面在main.js中引入的时候填写对应路径即可）
- 在main.js中引入（之前在main.js中引入的vue-print-nb可以去掉了）
// main.jsimport Print from'./assets/print'
Vue.use(Print)
- 在assets目录中的print文件夹下找到print.js修改代码，添加beforeEntryIframe钩子
// print.jsnewPrint({ids: id,// * 局部打印必传入id
vue,url: binding.value.url,// 打印指定的网址，这里不能跟id共存 如果共存id的优先级会比较高standard:'',// 文档类型，默认是html5，可选 html5，loose，strictextraHead: binding.value.extraHead,// 附加在head标签上的额外标签,使用逗号分隔extraCss: binding.value.extraCss,// 额外的css连接，多个逗号分开previewTitle: binding.value.previewTitle ||'打印预览',// 打印预览的标题zIndex: binding.value.zIndex ||20002,// 预览窗口的z-indexpreviewPrintBtnLabel: binding.value.previewPrintBtnLabel ||'打印',// 打印预览的标题popTitle: binding.value.popTitle,// title的标题preview: binding.value.preview ||false,// 是否启动预览模式asyncUrl: binding.value.asyncUrl,// ----------------添加下方代码 beforeEntryIframe-----------------------beforeEntryIframe(){
binding.value.beforeEntryIframe && binding.value.beforeEntryIframe(vue)},// ----------------------------------------------------------------------previewBeforeOpenCallback(){// 预览窗口打开之前的callback
binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)},previewOpenCallback(){// 预览窗口打开之后的callback
binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)},openCallback(){// 调用打印之后的回调事件
binding.value.openCallback && binding.value.openCallback(vue)},closeCallback(){
binding.value.closeCallback && binding.value.closeCallback(vue)},beforeOpenCallback(){
binding.value.beforeOpenCallback && binding.value.beforeOpenCallback(vue)}});
- 在assets目录中的print文件夹下找到printarea.js修改代码，添加一行代码以触发上方的beforeEntryIframe函数
// printarea.js// 找到 getBody 添加一行代码 this.settings.beforeEntryIframe();getBody(){let ids =this.settings.ids;
ids = ids.replace(newRegExp("#","g"),'');// ------------添加的这一行-----------------this.settings.beforeEntryIframe();// ----------------------------------------this.elsdom =this.beforeHanler(document.getElementById(ids));let ele =this.getFormData(this.elsdom);let htm = ele.outerHTML;return'<body>'+ htm +'</body>';}
- 在使用vue-print-nb的页面中修改printObj对象（上面的vue-print-nb使用步骤3）
// 在数据data中添加printObj:{id:'print',popTitle:'',// 打印配置页上方标题extraCss:'',// 打印可引入外部的一个 css 文件// ... ... // 其他配置项或钩子函数可参考官方 https://www.npmjs.com/package/vue-print-nb// ------------------------添加下面代码---------------------------beforeEntryIframe(){const cells = document.querySelectorAll('.cell')const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')// el-table 打印不全的问题for(let j =0; j < tableNode.length; j++){const tableItem = tableNode[j]
tableItem.style.width ='100%'const child = tableItem.childNodes
for(let i =0; i < child.length; i++){const element = child[i]if(element.localName ==='colgroup'){
element.innerHTML =''}}}// el-table 格子里面打印超过格子的问题for(let i =0; i < cells.length; i++){const cell = cells[i]
cell.style.width ='100%'
cell.removeAttribute('style')}}},
- 改完后运行代码，查看打印效果，一行放不下时文字会做换行处理
本文转载自: https://blog.csdn.net/qq_41329287/article/details/129488628
版权归原作者 奋斗喵 所有， 如有侵权，请联系我们删除。
版权归原作者 奋斗喵 所有， 如有侵权，请联系我们删除。