vue-print-nb uses

Install vue-print-nb

npm install vue-print-nb --save

Introduced in main.js

// main.js
import Print from 'vue-print-nb'
Vue.use(Print)

Use 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>

Solve the problem of incomplete printing element form

Because the source code needs to be modified, copy the following files directly and put them in the assets directory of the project (copy the node_modules/vue-print-nb/print file to the project, not necessarily the assets directory, where you want to put it, the following is in main Just fill in the corresponding path when importing in .js)
Introduced in main.js (the vue-print-nb introduced in main.js before can be removed)

// main.js
import Print from './assets/print'
Vue.use(Print)

Find print.js under the print folder in the assets directory to modify the code and add the beforeEntryIframe hook

// 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)
   }
 });

Find the printarea.js modification code under the print folder in the assets directory, and add a line of code to trigger the beforeEntryIframe function above

// 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>';
}

Modify the printObj object in the page using vue-print-nb (vue-print-nb above uses step 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')
    }
  }
},

After the modification, run the code to check the printing effect. When a line cannot fit, the text will be wrapped.

Vue-print-nb uses and solves the problem of incomplete printing of element forms

vue-print-nb uses

Solve the problem of incomplete printing element form

Guess you like