vue-print-nb使用和解决打印element表格不全问题

这篇具有很好参考价值的文章主要介绍了vue-print-nb使用和解决打印element表格不全问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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中引入的时候填写对应路径即可)
    vue-print-nb使用和解决打印element表格不全问题
  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-print-nb使用和解决打印element表格不全问题

文章来源地址https://www.toymoban.com/news/detail-470993.html

到了这里,关于vue-print-nb使用和解决打印element表格不全问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue使用打印组件print-js

    由于甲方要求,项目需要打印二维码标签,故开发此功能 安装包:npm install print-js --save print-js的使用 例如:在打印过程中会出现字体样式失效的问题:          加入这行代码即可 font_size: \\\'\\\',

    2024年02月10日
    浏览(63)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • 解决vue+element ui 在使用element表格时,出现表格表头与内容对不齐的问题

    我们在使用element ui的表格功能时,出现如下图所示表格头与内容对不齐的问题时解决方法如下  方法一: 在App.vue中加入 方法二: 在自建的css文件中加入  body .el-table th.gutter{ display: table-cell!important; } 然后使用下列语句将css文件导入App.vue中 效果如下图所示      

    2024年02月15日
    浏览(59)
  • 使用Vue @media print在JavaScript中插入不同尺寸的打印页面,可自定义尺寸大小和打印机配置

    本文介绍了如何在Vue项目中使用@media print和JavaScript来插入不同尺寸的打印页面,并提供了代码编写、使用教程、注意事项和避坑点,最后进行了总结。 在开发Web应用程序时,经常需要提供打印功能。Vue框架提供了@media print媒体查询,可以根据打印需求自定义打印页面的样式

    2024年02月05日
    浏览(106)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(下)

    在进入文章的正文之前,我们先一起了解一下关于 CSDN 今年的 1024 程序员节。与此同时这也是我在 CSDN 参与的第二个 1024 程序员节日,转眼间也快写博客两年时间,去年很遗憾没有去到深圳(疫情原因)线下参加这个有趣而充实的峰会。今年没有特殊情况的话一定会如约而至

    2024年02月06日
    浏览(49)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)

    今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的使用,以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联

    2024年02月06日
    浏览(44)
  • npm install vue3-print-nb --legacy-peer-deps npm ERR!

    npm install vue3-print-nb --legacy-peer-deps npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/vue3-print-nb failed, reason: certificate has expired npm ERR! A complete log of this run can be found in: C:UsersadminAppDataLocalnpm-cache_logs2024-01-22T04_35_33_436Z-debug-0.log 解决方法:

    2024年01月23日
    浏览(42)
  • vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案

    项目使用 element ui 的表格实现拖动表头可改变列的宽度,又使用sortablejs实现表格的列可拖拽到其他列的位置,导致出现如下的一些问题: 1、某一列宽变大或变小后,只有当前列可拖拽,其他列无法拖拽。 解决方案:在列宽发生改变后,销毁当前拖拽实例,再重新创建拖拽

    2024年02月08日
    浏览(52)
  • vue-print 实现打印功能

    一、安装 1. Vue2 2. Vue3 二、基本使用 1. 直接打印页面HTML 1)方法 ① 给要打印的部分设置一个 id ② 在打印按钮中添加 v-print=\\\"\\\'#id名\\\'\\\" 2)代码(以表格为例) 2. 个性化设置 1)方法 打印按钮的 v-print 绑定一个对象 2)代码 3)效果展示 ① 预览工具 3. 打印URL 1)方法 ① 给 打印

    2024年02月02日
    浏览(39)
  • 解决print spooler打印服务自动停止的过程记录

    办公室一台电脑的共享打印机突然无法打印,提示打印服务已停止,打开服务发现print spooler服务已经停止,同时打印机列表中打印机记录也全部消失。右键启动服务,打印机列表出现,但是刷新后发现print spooler服务又已经停止。 根据网上的解决方法,有人认为是打印服务的

    2024年02月04日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包