vue-print-nb使用

  1. 安装 vue-print-nb
npm install vue-print-nb --save
  1. 在main.js中引入
// main.js
import Print from 'vue-print-nb'
Vue.use(Print)
  1. 使用 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表格不全问题

  1. 因为需要修改源码，所以直接拷贝以下文件，放到项目的assets目录下（将node_modules/vue-print-nb/print文件拷贝至项目中，不一定要assets目录，想放哪放哪，下面在main.js中引入的时候填写对应路径即可）
    在这里插入图片描述
  2. 在main.js中引入（之前在main.js中引入的vue-print-nb可以去掉了）
// main.js
import Print from './assets/print'
Vue.use(Print)
  1. 在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)
   }
 });
  1. 在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>';
}
  1. 在使用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')
    }
  }
},
  1. 改完后运行代码，查看打印效果，一行放不下时文字会做换行处理
    在这里插入图片描述
# vue.js # javascript # 前端
GitHub 加速计划 / eleme / element
14
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：1 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo
GitCode 开源社区

新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

混元世界模型 1.1 在 GitCode 开源！秒级生成 3D 世界，开发者速来体验！

avatar GitCode 开源社区
cover

GitCode 9 月：小程序新增三大模型专属频道；百大开源项目结果公布；GitCodeAI 社区战略升级全景发布会圆满召开

avatar GitCode 开源社区

华为盘古 Ultra-MoE-718B-V1.1 正式开放下载！

👉Int8量化版本也同步开源：https://gitcode.com/ascend-tribe/openPangu-Ultra-MoE-718B-V1.1-Int8还记得9月底刷屏的「华为盘古718B」吗？当时凭借的训练哲学，在 SuperCLUE 榜单中一举冲至开源模型第三，成为业界焦点。openPangu-Ultra-MoE-718B-V1.1 是基于昇腾 NPU 训练的大规模混合专家（Mo

avatar GitCode 开源社区