vue-print-nb使用
- 安装 vue-print-nb
npm install vue-print-nb --save
- 在main.js中引入
// main.js
import 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.js
import Print from './assets/print'
Vue.use(Print)
- 在assets目录中的print文件夹下找到print.js修改代码,添加beforeEntryIframe钩子
// print.js
new Print({
ids: id, // * 局部打印必传入id
vue,
url: binding.value.url, // 打印指定的网址,这里不能跟id共存 如果共存id的优先级会比较高
standard: '', // 文档类型,默认是html5,可选 html5,loose,strict
extraHead: binding.value.extraHead, // 附加在head标签上的额外标签,使用逗号分隔
extraCss: binding.value.extraCss, // 额外的css连接,多个逗号分开
previewTitle: binding.value.previewTitle || '打印预览', // 打印预览的标题
zIndex: binding.value.zIndex || 20002, // 预览窗口的z-index
previewPrintBtnLabel: 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(new RegExp("#", "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://www.toymoban.com/news/detail-470993.html
文章来源:https://www.toymoban.com/news/detail-470993.html
到了这里,关于vue-print-nb使用和解决打印element表格不全问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!