首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在vue.js中使用chrome浏览器在每个打印页中打印静态页眉

可以通过以下步骤实现:

  1. 首先,在Vue组件中引入打印样式表,可以使用@media print媒体查询来定义打印样式。在组件的<style>标签中添加以下代码:
代码语言:txt
复制
<style>
@media print {
  /* 定义打印样式 */
  @page {
    /* 设置页眉 */
    margin-top: 20mm;
    margin-bottom: 10mm;
    @top-center {
      content: "这里是静态页眉";
    }
  }
}
</style>
  1. 在需要打印的页面中,添加一个按钮或者其他触发打印的事件。例如,在模板中添加一个按钮:
代码语言:txt
复制
<template>
  <div>
    <!-- 其他页面内容 -->
    <button @click="printPage">打印</button>
  </div>
</template>
  1. 在Vue组件的方法中,定义打印事件处理函数printPage,使用window.print()方法触发打印:
代码语言:txt
复制
<script>
export default {
  methods: {
    printPage() {
      window.print();
    }
  }
}
</script>

这样,在使用Chrome浏览器打开该页面后,点击打印按钮时,每个打印页都会包含静态页眉。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何将HTML表格转换成精美的PDF

让我们一一探讨每个解决方案。 原生浏览器打印功能 首先,我们考虑使用浏览器的内置工具导出 PDF。查看任何网页时,你可以通过右键单击任意位置,然后从菜单中选择“打印”选项来轻松地打印页面。...浏览器的输出: 使用内置打印功能和Chrome浏览器导出的PDF 我对这里的输出感到惊喜,虽然它并不华丽——内容只是黑白色的,但主要的表格样式却被完整地保留了下来。...页面的底部,我们看到了打印这篇文章的网站以及页码。 如果我保存这个文档的唯一目的是为了看数据,那么 Chrome 浏览器做得很好。...输出如下: 使用内置打印功能和Safari浏览器导出的PDF 你会注意到表格看起来大致相同,页面页眉和页脚内容也是如此。但是,表列标题和表脚不重复!...表格的列头和表脚每一上都是重复的,表格的行数不会被切掉,而且页面四面都有适当大小的边距,每个页面的页眉也是重复的,每个页面底部的页码也是重复的。

6.8K20
  • Web应用程序如何创建 PDF

    此外,我们无法控制边距框的内容,例如 将我们选择的标题添加到每个页面或页码编号,以显示页数。 这些内容是Paged Media规范的一部分,但尚未在任何浏览器实现。...使用浏览器渲染引擎打印 还有一些方法可以使用浏览器渲染引擎将文档打印成PDF,而不需要在浏览器使用打印的菜单,并且以页眉和页脚结束。...我之前的的推文时,最受欢迎的选项是wkhtmltopdf,以及使用无头Chrome和Puppeteer打印。...它通过使用WebKit渲染引擎来实现这一点。 因此,从本质上讲,这个工具与与浏览器打印效果是一样的,但是,不会得到自动添加的页眉和页脚。...无头 Chrome 另一种是使用无头的谷歌浏览器打印 PDF。 然而,再次受到浏览器对 Paged Media 和 fragmentation 支持的限制。

    2.8K30

    阅读资料新姿势:如何正确打印网页内容为PDF文件

    (有时候将资料存在平板上静下心来阅读,才是真正收获的开始) 如何正确打印 打印PDF的步骤很简单,以Chrome谷歌浏览器为例,我们页面上直接右键点击打印即可。...这时候就会弹出: 其中页码根据需要调整,布局选择纵向,可以不选页眉和页脚以节省空间。 其中边距建议自定义,自己调整下。...去掉遮挡 打印预览的时候如果发现每一的最上方都会有一横杠遮挡住了我们要看的内容,怎么办,当然是去掉它 返回当前的网页,按下F12或者Ctrl+Shift+I(windows,mac将Ctrl换位cmd...: 这样的原因是因为打印的时候会自动调整当前网页的各种内容格式放到一起,如果东西太多就会加载不过来,这时我们需要删减一些东西 通过调整打印页码删除内容不需要的部分,比如评论部分 删掉网页内容不需要的装饰...,如下方的网页左面一栏作者介绍就没有必要,直接通过F12网调试器选择删除即可 删除之后经过调整就可以直接打印了,阅读器上阅读自己收集的文章吧~

    61240

    web调用打印机自动打印_网页打印如何设置默认打印

    (当然,用户有各种各样的需求和打印格式要求,愿意使用打印控件的,开发的打印功能当然很好。) 所以直接使用浏览器自带的打印功能,就成为一个选择。 2....2.4 iframe打印 如果你的打印格式比较复杂,现有页面通过上边介绍的方式实现起来比较麻烦,那就干脆使用iframe打印吧。...、页眉、页脚等,可以先按 1.6 描述方式进行设置。...在打印的时候,你可能希望由自己来控制边距、页眉、页脚等。...可以按如下方式,在打印前进行相应的设置(注:由于使用了ActiveXObject,需要进行相应的浏览器安全设置,将浏览器安全设置中有关“ActiveX控件和插件”下的相关限制放开,当然,这样做不是很安全

    6.3K20

    关于CSS 打印你应该知道的样式配置

    昨天在做一些打印的需求,遇到了一些小坑,记录分享一下。 CSS 打印分页功能 需求: html 一个区域显示数据,当放不下时,自动第二存放,打印 你可以使用 CSS 的分页属性来实现这个功能。...然后,我们定义了一个名为 page 的父元素,并为其设置了 page-break-after: always; 属性,表示该元素之后始终分页。 当数据超出一时,浏览器会自动将剩余部分放到下一。...如果你需要打印这些数据,只需将页面设置为打印模式即可。在打印预览,你可以看到所有的数据被正确地分页,并且可以跨打印。...属性来控制打印版本图片的最大宽度,避免图片溢出页面边界。...隐藏链接的 URL:如果你不希望在打印版本显示链接的 URL,可以使用 text-decoration 属性来隐藏。

    1.1K40

    WEB 打印的相关技术分析

    IE 下开发应用使用的语法为JScript 的语法,由于它和JavaScript 几乎没有什么区别,所以也可以称其为JavaScript(下面简写为JS)。...由于打印 内容是从数据库获取的,所以生成操作相对简单; 缺点:服务器端负载比较大; (二)、页面设置 页面设置主要是指设置打印文档的边距、页眉、页脚、纸张等内容。...打印模板可以控制边距、页眉、页脚、奇偶等内容,并可以将用户的设置取得,还可以将设置发送到服务器端。 打印模板技术可以自定预览窗口和打印格式,最大限度地影响目标文档和打印效果。... 程序头 '首先声明表格容器 Protected WithEvents phContainer As System.Web.UI.WebControls.PlaceHolder '每个表格的记录数量...总之,现有的打印方案各有所长,开发过程应根据用户的需求作选择,利用IE打印简单,容易实现,在用户需求简单或打印内容较少的情况下采用此方案比较适宜。

    2.3K20

    浏览器分页静默打印

    作为前端开发,浏览器打印算是一个比较常见的需求了。最简单的做法就是直接打印整个网页,浏览器直接打印或者调用window.print()。 这样就能将当前页面整个打印出来了。...二、使用 iframe 打印 Iframe打印其实最终也是调用了浏览器apiwindow.print()进行打印的。...当然不会,实际需求还有更复杂的打印场景,比如当打印报表。 而打印报表的时候就会涉及到页眉、页脚、分页等等。...总{{pageList.length}} {{/pageList}} 不难看出,当我们将 pageList 渲染到如上模板就能得到多个pageList,每个...当我们浏览器页面上点击一个打印按钮的时候,直接通过 Websocket 将打印事件、打印文本及其他相关打印信息发送给打印控件服务。 打印控件接收到请求之后再调用电脑的打印功能,调用打印机即可。

    63910

    Java后端:html转pdf实战笔记

    Wkhtmltopdf可直接把浏览器浏览的网页转换成一个pdf,他是一个把html页面转换成pdf的软件(需要安装在服务器上)。使用时可通过java代码调用cmd指令完成网页转换为pdf的功能。...指定用户的样式表,加载每一 –username HTTP认证的用户名 –version 输出版本信息退出 –zoom 使用这个缩放因子 (default 1)页眉和页脚选项 –header-center...* (添加一个HTML页眉,后面是网址) –header-left* (左对齐的页眉文本) –header-line* (显示一条线页眉下) –header-right* (右对齐页眉文本) –header-spacing...,h2来定) –outline-depth 设置目录的深度(默认为4) 页脚和页眉 * [page] 由当前正在打印的数目代替 * [frompage] 由要打印的第一的数量取代 * [topage...] 由最后一打印的数量取代 * [webpage] 通过正在打印的页面的URL替换 * [section] 由当前节的名称替换 * [subsection] 由当前小节的名称替换 * [date]

    4.4K61

    Google Chrome Headless (网页保存为PDF、网页截图)

    一、Linux安装Chrome浏览器 yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64....rpm 二、指定网页打印成PDF google-chrome --headless --disable-gpu --no-sandbox --print-to-pdf=gen.pdf http://www.google.com...--headless ,无头模式下运行,即没有UI或显示服务器依赖性。 3.--disable-gpu ,禁用GPU硬件加速。如果软件渲染器不到位,则GPU进程将无法启动。 4....--timeout,指定的毫秒数后发出停止。这将取消所有导航并导致DOMContentLoaded事件触发。 8. --incognito,使用无痕模式打开页面。...Chrome浏览器启动参数大全(命令行参数):https://www.cnblogs.com/gurenyumao/p/14721035.html 去除打印pdf时网页的页眉页脚,需要在网页的css中加入以下代码

    3.1K20

    前后端分离时代的SEO实践经验

    如果是,则把请求转发给prerender服务Prerender 服务器会使用一个头less浏览器(通常是谷歌Chrome)来打开并渲染请求的页面,就像一个真实的浏览器会做的一样。...逐个路由预渲染:对于每个配置中指定的路由,我们的插件都会执行下面的步骤:使用无头浏览器打开路由:插件会将路由加载到无头浏览器,就像一个真实的浏览器会加载页面一样。...工作原理启动浏览器引擎:PhantomJS会启动一个无界面的浏览器引擎,基于WebKit引擎(类似于Chrome和Safari浏览器的渲染引擎)。...缺点:部署要求固定:部署需要node服务器支持不再维护:PhantomJS的维护已经停止,不再推荐新项目中使用资源占用:PhantomJS在内存和CPU方面可能会占用较多资源,尤其是大规模爬取或测试任务...渲染引擎陈旧:PhantomJS使用的渲染引擎基于WebKit,而现代浏览器已经使用了更先进的渲染引擎。这可能导致一些网页PhantomJS显示不正常。

    79210

    Word基础

    插入页眉与页脚,页码 10、分节符  11、部件 12、奇偶不同与首页不同 默认新建的文档都是同一节 通过分节符可以将文档划分成多个节 奇偶不同与首页不同只是作用在同一节 13、SmartArt...1.3、浏览器要求 系统开发采用B/S结构,用户只需要在浏览器输入相应的地址就可直接访问系统。...系统本身兼容多种浏览器,但要获得良好的用户体验建议使用现代主流的浏览器如:Chrome(google 浏览器)、firefox(火狐浏览器)、Safari(苹果浏览器)、Opera、IE8+及WebKit...如果达不到要求您可以互联网上下载到最新的浏览器,安装后再访问。 1.4、网络带宽要求 外网访问要求2Mbit/s的下行带宽与1Mbit/s的上行带宽,建议避开网络使用高峰期。...1.5、其它要求 如果您需要在线打印,请确保安装好了打印机驱动并在控制面板添加了打印机;如果您需要导入与导出Excel文档并实现编辑打印功能,请安装WPS Excel或Microsoft Office

    1.2K90

    Spread for Windows Forms高级主题(7)---自定义打印的外观

    下面的表列出了可插入到页眉和页脚的控制指令。...控制字符 完整的命令 打印页面的页眉或页脚的行为 / / 插入正斜杠字符(/) /c /c 调整项目居中 /cl /cl"n" 设置文本的字体颜色,使用以0为基准的颜色索引,n,引号(n可以是0或更大.../dl /dl 使用长格式,插入日期 /ds /ds 使用短格式,插入日期 /f /f"n" 重新调用先前保存的字体设置(查看表的/fs),使用以0为基准的索引,n,引号(n可以是0或更大)。.../fs /fs"n" 保存字体设置以便重复使用使用以0为基准的字体设置索引,n,引号(查看表的/f) /fu /fu0 关闭下划线 /fu1 打开下划线 /fz /fz"n" 设置字体的大小...你可以保存页眉或页脚的字体设置,以便重复使用。 这个是下面代码运行的结果。 ? 下面的示例代码打印带有指定页眉和页脚文本的表单: //创建PrintInfo对象并设置属性。

    3.6K70

    Office 2007 实用技巧集锦

    Word,只要按住【ALT】键,再用鼠标点击这个单词,即可在右侧的【信息检索】任务窗格看到翻译的结果。并且还可以选择多种语言互译,这一招IE浏览器也同样适用!...自动重复标题行 Word插入表格的时候往往表格显示不完全,需要在下一继续,为了阅读方便我们会希望表格能够的时候自动重复标题行。...此方法隐藏行或列以及分类汇总后用途非常广泛。 Excel的页眉页脚 如同Word一样,Excel也可以设置页眉页脚,使得打印输出时每一都可以显示定义的页眉页脚内容。...只需选择【视图】选项卡的【页面布局】视图,即可按照分页形式显示Excel的数据,这就是打印输出后分页显示的效果。同时,【页面布局】视图中,可对页面进行页眉页脚的设置。...还可以打印范围”中选择需要打印的幻灯片的页数,例如只需要打印第一到四以及第九、十,只需要输入“1-5,9,10”即可。

    5.4K10

    Office 2007 实用技巧集锦

    Word,只要按住【ALT】键,再用鼠标点击这个单词,即可在右侧的【信息检索】任务窗格看到翻译的结果。并且还可以选择多种语言互译,这一招IE浏览器也同样适用!...自动重复标题行 Word插入表格的时候往往表格显示不完全,需要在下一继续,为了阅读方便我们会希望表格能够的时候自动重复标题行。...此方法隐藏行或列以及分类汇总后用途非常广泛。 Excel的页眉页脚 如同Word一样,Excel也可以设置页眉页脚,使得打印输出时每一都可以显示定义的页眉页脚内容。...只需选择【视图】选项卡的【页面布局】视图,即可按照分页形式显示Excel的数据,这就是打印输出后分页显示的效果。同时,【页面布局】视图中,可对页面进行页眉页脚的设置。...还可以打印范围”中选择需要打印的幻灯片的页数,例如只需要打印第一到四以及第九、十,只需要输入“1-5,9,10”即可。

    5.1K10

    使用 Vue.js Devtools 扩展作为 Vue 应用调试工具

    安装扩展 在此之前,我们先来介绍一款 Vue.js 本地开发的调试工具 —— Vue.js Devtools,这是一个浏览器扩展,当前支持 Chrome 和 Firefox 浏览器,你可以 Chrome...商店搜索并安装它: 也可以 Firefox 扩展搜索并安装它: 接下来,我们以 Chrome 为例来演示它的基本使用。...以上篇教程创建的 HTML 文档为例, IntelliJ IDEA 中点击 Chrome 浏览器预览之后,在打开的 Chrome 浏览器页面通过 Option + Command + I 打开开发者工具...(Windows 是 F12)面板,可以在在标签的最右侧看到 Vue 选项卡: 组件标签(Components)下点击 Root 就可以看到当前页面 Vue 实例的模型数据。...另外,如果当前 HTML 页面没用使用 Vue 框架,Vue.js Devtools 扩展会处于未激活状态: 可以看到该扩展的颜色是灰色的,同时开发者工具的标签也没有 Vue 选项卡,表示该页面没有使用

    1.8K30

    (数据科学学习手札50)基于Python的网络数据采集-selenium篇(上)

    初级篇我们也只了解到如何爬取静态网页,那是网络爬虫中最简单的部分,事实上,现在但凡有价值的网站都或多或少存在着自己的一套反爬机制,例如利用JS脚本来控制网页中部分内容的请求和显示,使得最原始的直接修改静态目标页面...selenium测试直接运行在浏览器,就像真正的用户操作一样。支持的浏览器包括IE、Mozilla Firefox、Mozilla Suite、Chrome等。...=chrome_options) '''browser对应的浏览器,以禁止图片加载的方式访问百度首页''' browser.get('http://www.baidu.com') '''查看当前浏览器已设置的参数...:   假设我们构造了一个叫做browser的浏览器对象,可以使用的方法如下: browser.get(url):浏览器主窗口中打开url指定的网页; browser.title:获得当前浏览器主页面的网页标题...,我们找到“下一”按钮元素CSS结构中所在的位置:   先把该元素完整的xpath路径表达式写出来: //div/div/a[@class='ti next _j_pageitem'] 接着我们使用基于

    1.8K50

    wkhtmltopdf参数详解及精讲使用方法

    -q, --quiet 静态模式,不在标准输出打印任何信息 --read-args-from-stdin 从标准输入读取命令行参数,后续会有针对此指令的详细介绍...[page] 当前正在被输出页面的页码[frompage] 第一文档的页码[topage] 最后一面文档的页码[webpage] 当前正在被输出页面的URL[section...–use-xserver* 使用X服务器(一些插件和其他的东西没有X11可能无法正常工作) –user-style-sheet 指定用户的样式表,加载每一 –username...,h2来定) –outline-depth 设置目录的深度(默认为4) 页脚和页眉 * [page] 由当前正在打印的数目代替 * [frompage] 由要打印的第一的数量取代...* [topage] 由最后一打印的数量取代 * [webpage] 通过正在打印的页面的URL替换 * [section] 由当前节的名称替换 * [subsection

    97810
    领券