【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印

这篇具有很好参考价值的文章主要介绍了【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

解决的最终方案如下图

浏览器打印设置自定义页眉,VUE+ElmentUI,前端,javascript,html

 需求:页眉页脚如下,设计图所示,使用浏览器Ctrl+P打印即可,大小B5试纸

浏览器打印设置自定义页眉,VUE+ElmentUI,前端,javascript,html

一、实现方法

说明:数据内容不确定分页的情况下,建议使用 方法二

相关属性参考地址:https://www.w3cplus.com/css/designing-for-print-with-css.html

方法一:绝对相对定位(将自定义的页眉页脚内容通过计算定位到对应位置)

<div class="print_hander">
  <div v-print="'#a4Div'">
    <el-button type="warning" icon="el-icon-printer" @click="onClick">打印</el-button>
  </div>
</div>
<!-- 打印内容  -->
<div id="a4Div" ref="a4Div">
</div>


onClick() {
      this.$nextTick(() => {
        const num = 890
        let a4Div = this.$refs.a4Div
        let height = a4Div.offsetHeight
        let count = Math.floor(height / num) + 1
        for (let i = 0; i < count; i++) {
          let dom = document.createElement('div')
          let topValue = Number(num * (i + 1)) + Number(18 * i) - num
          this.dataInfo.forEach((subjectItem, subIndex) => {
            let top = `<div style="position:absolute;top:${topValue}px;font-size:12px;width:100%;height:${num}px;">
              <div style="height:30px;border-bottom: 1px solid #828282; display: flex;
                  justify-content: center; position:absolute;left:50%; transform: translate(-50%, -50%);width:100%;">
                <p style="margin-right: 46px;">${subjectItem.BaseInfo.SchoolName}</p>
                <p style="margin-right: 46px;">${subjectItem.BaseInfo.Grade + subjectItem.BaseInfo.ClassName}</p>
                <p style="margin-right: 46px;">成长记录</p>
                <p>学号:${subjectItem.BaseInfo.ExamNo}【${subjectItem.BaseInfo.Subject}】</p>
              </div>
              <div style="position:absolute;right:0;bottom:0;font-size:18px;">${(i + 1)}/${count}</div>
            </div>`
            dom.innerHTML = top
            a4Div.appendChild(dom)
          })
        }
      })
    }
}

存在的问题:当数据通过循环不确定的情况下,分页靠内容往下撑开,造成页眉页脚与内容重叠

解决重叠:添加 “ page-break-inside:avoid; ” 属性,将图片和带有 page-break-inside:avoid; ” 属性” 的div 整个分页隔开

<style lang="scss" scoped>
@media print {
  .tex_item {
     page-break-inside:avoid; 
  }
  img{
     page-break-inside:avoid; 
  }
}
</style>

方法二:修改 Chrome 自带的页眉页脚(打印时需要勾选 “ 页眉页脚 ”)

浏览器打印设置自定义页眉,VUE+ElmentUI,前端,javascript,html

 1、修改页眉的标题

<script>
export default {
  data() {
    return {
      printObj: {
        id: '#a4Div',
        popTitle: '打印'  // 页眉标题
      }
    }
  }
}
</script>

2、修改页脚左侧的链接(通过调样式隐藏即可,其中margin-bottom的值多少决定是否能隐藏链接,根据页眉去调即可)

@media print {
  @page {
    size: B5(JIS);
    // 此处调整使其只显示页脚中的页码,具体根据页面调整
    margin: 10mm 16mm;
    margin-bottom: 8mm;
  }
}

存在的问题:添加 “ page-break-inside:avoid; ” 分页属性时,会使其链接显示出来,如果不显示左侧链接就不要使用此属性

3、完整代码

<div class="print_hander">
  <div v-print="printObj">
    <el-button type="warning" icon="el-icon-printer" @click="onPrint">打印</el-button>
  </div>
</div>
<!-- 打印内容  -->
<div id="a4Div" ref="a4Div">
</div>


<script>
export default {
  data() {
    return {
      printObj: {
        id: '#a4Div',
        popTitle: '打印',
        ignoreClass: 'noprint' // 不需要打印的内容
        // extraCss: 'https://www.google.com,https://www.google.com',
        // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      }
    }
  },
  methods: {
    // 打印方法
    onPrint() {
      this.dataInfo.forEach((subjectItem, subIndex) => {
        this.printObj.popTitle = subjectItem.BaseInfo.SchoolName + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
        subjectItem.BaseInfo.Grade + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + subjectItem.BaseInfo.UserName +
         '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学号:' + subjectItem.BaseInfo.ExamNo + '【' + subjectItem.BaseInfo.Subject + '】'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@media print {
  @page {
    size: B5(JIS);
    // 此处调整使其只显示页脚中的页码,具体根据页面调整
    margin: 10mm 16mm;
    margin-bottom: 8mm;
  }
}

二、总结

问题:当使用方法二时,不同的数据导致页脚的页码不兼容时

解决方法:可以采用方法一做页脚中的页码,方法二做页眉

结果:这样既可避免页眉与内容重叠,也可以解决页脚不兼容。

       希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~文章来源地址https://www.toymoban.com/news/detail-650795.html

到了这里,关于【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • python 学习笔记20 批量修改页眉页脚

    需求:修改指定目录下所有文件的页眉页脚,或者往里面添加内容。 1. 这里做了word的实现和excel的实现,如下: 需要先安装 pip3 install pywin32,另外页眉页脚格式设置可以参考: word: 浅谈Word.Application,关于js操作word文档的使用_new word.application-CSDN博客 excel: Python操作Excel教

    2024年02月04日
    浏览(41)
  • Python处理PDF:在PDF文档中插入页眉和页脚

    在处理篇幅较长、结构复杂的PDF文档时,页眉和页脚的设计与插入就显得尤为重要。它们不仅扮演着美化文档、提升专业度的角色,更承担了导航指引、信息标注的重要功能。 页眉通常用于展示文档的标题或章节名称,有助于读者在翻阅过程中迅速定位所处位置,对文档的整

    2024年04月16日
    浏览(46)
  • 开源Word文字替换小工具更新 增加文档页眉和页脚替换功能

    ITGeeker技术奇客发布的开源Word文字替换小工具更新到v1.0.1.0版本啦,现已支持Office Word文档页眉和页脚的替换。 同时ITGeeker技术奇客修复了v1.0.0.0版本因替换数字引起的in ‘ requires string as left operand, not int错误。 开源Word文字替换小工具官方介绍页面:https://www.itgeeker.net/itgeeke

    2024年02月11日
    浏览(40)
  • vue2+printJs插件实现网络打印

    一. Print.js介绍 Print.js  主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件,无需离开界面,也无需使用嵌入。 对于用户无需打开或下载 PDF 文件而只需打印它们的特殊情况。 支持“pdf”、“html”、“image”和“json”四种打印文档类型。默认为“pdf”。   PrintJS参数配

    2024年02月07日
    浏览(32)
  • 【CSS 20】website layout 网站布局 页眉 导航栏 列布局 不相等栏 页脚

    website layout 网站布局 header 页眉 页眉(header)通常位于网站顶部(或顶部导航菜单的正下方) 通常包含徽标(logo)或网站名称 navbar 导航栏 导航栏包含链接列表,以帮助访问者浏览您的网站 内容 使用哪种布局通常取决于您的目标用户 最常见的布局是以下布局之一(或将它

    2024年02月13日
    浏览(81)
  • itextpdf7 使用之 html转pdf,生成目录可跳转、添加页眉页脚

    最近有个需求,生成信用报告。 需求: 1、生成pdf有页眉页脚 2、生成目录 3、目录加锚点可跳转。 难点: 1、生成的目录不能实时读取页码 2、目录是后生成的,属于两份pdf拼接的,不能添加锚点跳转 思路: 1、freemaker进行html页面布局及动态变量替换 2、生成一份pdf文档,用

    2024年02月20日
    浏览(36)
  • appemit 支持chrome edge谷歌微软浏览器佳博Gprinter 标签打印机 TSCLIB.DLL 函数库使用说明

    支持谷歌 firefox edge 360 qq sogou等各种浏览器,在线使用 佳博Gprinter 标签打印机 直接js操作 TSCLIB.DLL 函数库使用说明 请在使用TSCLIB.DLL 前,安装条形码打印机驱动程序。 1. openport(a) 说明: 指定计算机端的输出端口 参数: a: 单机打印时,请指定打印机驱动程序名称,例如: TSC TDP

    2024年02月04日
    浏览(52)
  • 【分页表格】Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)

    这篇文章,主要介绍Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)。 目录 一、分页表格 1.1、运行效果 1.2、运行环境 1.3、案例代码

    2024年02月11日
    浏览(55)
  • vue2实现自定义主题webpack-theme-color-replacer

    需求:根据element的自定义主题色,之后改变element的全局所有颜色,解决页面刷新后主题色失效问题,这个需要把颜色存入到浏览器的存储中,如果换个浏览器就得重新选择了哈,如果需要在不同的浏览器保持一致的主题,需要跟后端沟通 之前还写过一个简单的,有需要的可

    2024年02月07日
    浏览(48)
  • Chrome 浏览器安装Vue2、Vue3插件方法 (详细有效)

    因为谷歌商城需要翻墙,很多人进不去,无法下载vue插件。推荐一个好用的网站“极简插件”,里面有很多的谷歌应用插件可以下载。 下载插件地址 点击上方链接,在极简插件里搜索如图下载,根据自己需要进行下载。 点开扩展程序页面,方面后面把插件拖进去  以

    2024年02月12日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包