vue3-print-nb(www.npmjs.com/package/vue…
- 安装 vue-print-nb
npm install vue3-print-nb --save
- 在main.js中引入
// main.js
import Print from 'vue3-print-nb'
Vue.use(Print)
- 使用 vue-print-nb
// 被打印的容器
<div id="printMe">这块内容将会被打印</div>
// 打印按钮绑定 printObj
<el-button v-print="printObj">打印</el-button>
// 在数据data中添加
printObj: {
id: 'printMe', // 这里是要打印元素的ID
popTitle: ' ', // 打印的标题
extraCss: '', // 打印可引入外部的一个 css 文件
extraHead: '', // 打印头部文字
preview: false, // 是否启动预览模式，默认是false
zIndex: 10002, // 预览窗口的z-index，默认是20002，最好比默认值更高
... ... // 其他配置项或钩子函数可参考官方 https://www.npmjs.com/package/vue-print-nb
},
解决打印element表格样式问题
通过修改css的方式修改打印时的样式
<style lang="scss" scoped>
@media print {
::v-deep table {
table-layout: fixed !important;
}
::v-deep #printMe table {
table-layout: fixed !important;
}
::v-deep .el-table__header-wrapper .el-table__header {
width: 99% !important;
}
::v-deep .el-table__body-wrapper .el-table__body {
width: 98% !important;
}
::v-deep.el-table__fixed {
display: none;
}
::v-deep.el-table .el-table__cell.is-hidden > * {
visibility: visible;
font-size: 12px;
}
}
</style>
解决打印element表格打印不全的问题
1.因为需要修改源码，所以直接拷贝以下文件，放到项目的assets目录下,两个文件哪个都可以
到assets目录下
- 在main.js中引入（之前在main.js中引入的vue-print-nb可以去掉了）
- 修改代码，添加beforeEntryIframe钩子
new e({
ids: r,
vue: s,
url: i.value.url,
standard: '',
extraHead: i.value.extraHead,
extraCss: i.value.extraCss,
zIndex: i.value.zIndex || 20002,
previewTitle: i.value.previewTitle || '打印预览',
previewPrintBtnLabel: i.value.previewPrintBtnLabel || '打印',
popTitle: i.value.popTitle,
preview: i.value.preview || !1,
asyncUrl: i.value.asyncUrl,
// ----------------添加下方代码 beforeEntryIframe-----------------------
beforeEntryIframe() {
i.value.beforeEntryIframe && i.value.beforeEntryIframe(s)
},
// ----------------------------------------------------------------------
previewBeforeOpenCallback() {
i.value.previewBeforeOpenCallback && i.value.previewBeforeOpenCallback(s)
},
previewOpenCallback() {
i.value.previewOpenCallback && i.value.previewOpenCallback(s)
},
openCallback() {
i.value.openCallback && i.value.openCallback(s)
},
closeCallback() {
i.value.closeCallback && i.value.closeCallback(s)
},
beforeOpenCallback() {
i.value.beforeOpenCallback && i.value.beforeOpenCallback(s)
}
})
4.在getBody方法中添加一行代码以触发上方的beforeEntryIframe函数
getBody() {
let e = this.settings.ids
// ----------------添加下方代码 beforeEntryIframe-----------------------
this.settings.beforeEntryIframe()
// ----------------------------------------------------------------------
return (
(e = e.replace(new RegExp('#', 'g'), '')),
(this.elsdom = this.beforeHanler(document.getElementById(e))),
'<body>' + this.getFormData(this.elsdom).outerHTML + '</body>'
)
}
- 在使用vue-print-nb的页面中修改printObj对象（上面的vue-print-nb使用步骤3）
const printObj = {
id: 'printMe', // 这里是要打印元素的ID
popTitle: ' ', // 打印的标题
extraCss: '', // 打印可引入外部的一个 css 文件
extraHead: '', // 打印头部文字
preview: false, // 是否启动预览模式，默认是false
zIndex: 10002, // 预览窗口的z-index，默认是20002，最好比默认值更高
// ----------------添加下方代码 beforeEntryIframe-----------------------
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')
}
}
}
// ----------------------------------------------------------------------
