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>
// 在數(shù)據(jù)data中添加
printObj: {
id: 'print',
popTitle: '', // 打印配置頁上方標題
extraCss: '', // 打印可引入外部的一個 css 文件
... ... // 其他配置項或鉤子函數(shù)可參考官方 https://www.npmjs.com/package/vue-print-nb
},
// 被打印的容器
<div id="print">這塊內(nèi)容將會被打印</div>
解決打印element表格不全問題
- 因為需要修改源碼，所以直接拷貝以下文件，放到項目的assets目錄下（將node_modules/vue-print-nb/print文件拷貝至項目中，不一定要assets目錄，想放哪放哪，下面在main.js中引入的時候填寫對應(yīng)路徑即可）
- 在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, // 打印指定的網(wǎng)址，這里不能跟id共存 如果共存id的優(yōu)先級會比較高
standard: '', // 文檔類型，默認是html5，可選 html5，loose，strict
extraHead: binding.value.extraHead, // 附加在head標簽上的額外標簽,使用逗號分隔
extraCss: binding.value.extraCss, // 額外的css連接，多個逗號分開
previewTitle: binding.value.previewTitle || '打印預(yù)覽', // 打印預(yù)覽的標題
zIndex: binding.value.zIndex || 20002, // 預(yù)覽窗口的z-index
previewPrintBtnLabel: binding.value.previewPrintBtnLabel || '打印', // 打印預(yù)覽的標題
popTitle: binding.value.popTitle, // title的標題
preview: binding.value.preview || false, // 是否啟動預(yù)覽模式
asyncUrl: binding.value.asyncUrl,
// ----------------添加下方代碼 beforeEntryIframe-----------------------
beforeEntryIframe(){
binding.value.beforeEntryIframe && binding.value.beforeEntryIframe(vue)
},
// ----------------------------------------------------------------------
previewBeforeOpenCallback () { // 預(yù)覽窗口打開之前的callback
binding.value.previewBeforeOpenCallback && binding.value.previewBeforeOpenCallback(vue)
},
previewOpenCallback () { // 預(yù)覽窗口打開之后的callback
binding.value.previewOpenCallback && binding.value.previewOpenCallback(vue)
},
openCallback () { // 調(diào)用打印之后的回調(diào)事件
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修改代碼，添加一行代碼以觸發(fā)上方的beforeEntryIframe函數(shù)
// 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）
// 在數(shù)據(jù)data中添加
printObj: {
id: 'print',
popTitle: '', // 打印配置頁上方標題
extraCss: '', // 打印可引入外部的一個 css 文件
// ... ... // 其他配置項或鉤子函數(shù)可參考官方 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')
}
}
},
- 改完后運行代碼，查看打印效果，一行放不下時文字會做換行處理
文章來源地址http://www.zghlxwxcb.cn/news/detail-470993.html
文章來源：http://www.zghlxwxcb.cn/news/detail-470993.html
到了這里，關(guān)于vue-print-nb使用和解決打印element表格不全問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
