usos de vue-print-nb

Instalar vue-print-nb

npm install vue-print-nb --save

Introducido en main.js

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

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

Resolver el problema de la forma del elemento de impresión incompleto

Debido a que es necesario modificar el código fuente, copie los siguientes archivos directamente y colóquelos en el directorio de recursos del proyecto (copie el archivo node_modules/vue-print-nb/print en el proyecto, no necesariamente en el directorio de recursos, donde desee para decirlo, lo siguiente está en main Solo complete la ruta correspondiente al importar en .js)
Introducido en main.js (el vue-print-nb introducido en main.js antes se puede eliminar)

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

Busque print.js en la carpeta de impresión en el directorio de activos para modificar el código y agregar el enlace 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)
   }
 });

Encuentre el código de modificación de printarea.js debajo de la carpeta de impresión en el directorio de activos y agregue una línea de código para activar la función beforeEntryIframe anterior

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

Modifique el objeto printObj en la página usando vue-print-nb (vue-print-nb arriba usa el paso 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')
    }
  }
},

Después de la modificación, ejecute el código para comprobar el efecto de impresión. Cuando una línea no quepa, el texto se ajustará.

Vue-print-nb utiliza y resuelve el problema de la impresión incompleta de formularios de elementos

usos de vue-print-nb

Resolver el problema de la forma del elemento de impresión incompleto

Supongo que te gusta