用css打印html

最新推荐文章于 2024-08-13 08:26:23 发布
最新推荐文章于 2024-08-13 08:26:23 发布
阅读量585 收藏
点赞数
原文链接：https://juejin.im/post/5b1603da51882513791047c1
版权

需求背景

最近接到一个需求，就是打印整个html页面，而且要保证打印出的每一张A4纸的内容是规律的，不能出现截断的这种现象出现(前一页的内容跑到后一页去了)。

解决办法

利用 paper css 这个样式表，并做一些简单的配置就可以完成此类需求

paper-css是一个用纯css的方式来完成打印相关任务的库，里面并不包含js逻辑。

使用方法

以A4纸为例。

首先在head标签里引入样式库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">
复制代码

然后在style标签中加入如下这句

<style>@page { size: A4 }</style>
复制代码

再为body元素添加值为A4的class

<body class="A4">
复制代码

最后再为每一页的包裹元素上，例如div或者section上添加值为“sheet”的class

<section class="sheet">
复制代码

这样编写完之后，每一个class为sheet的section在打印时就是单独的一页。你可以在section里装载任何你需要的标签元素

其它

paper-css不仅提供了A4纸这一种规格，同时还提供了A3，A5，PDF等格式。

参考

github.com/cognitom/pa…

weixin_34319640
关注
html 页面的打印
h5liangliang的博客
09-28 3128
web页面的打印   window.print() $('#dayin').click(function(){ $('#dayin').css('display','none') $('.classroom').css('display','none') $('.open').css('display','none') $('.open1').css('display','none')
js打印html页面
xudejun的博客
05-13 1029
function printse(){ document.getElementById('loading').style.display ='block'; document.getElementById('print').style = 'display:none' document.getElementById('download').style = 'display:none' getDomList('tuxiangfenxi_1', true, 20) getDomList('snengs
html调用打印机打印（可预览）样式css
11-02
html打印布局的样式，网页一打开或者刷新后input自动默认光标在中间。
html print css,css print
weixin_27009347的博客
07-17 224
最近做表单打印，遂整理了一些打印相关的内容。说到网页打印，首先想到的便是@media查询(即网页css)，通过使用媒体类型print即可解决实际应用的大多数问题，比如实现只打印网页的某部分内容，调整字体大小、修改布局等使打印出来的纸质文件更简洁明了。代码如下：@media print{/*隐藏不打印的元素*/.no-print{display:none;}/*其他打印样式*/}但是，就打印表单来说...
推荐使用：Paper CSS，前端打印新体验
最新发布
gitblog_00485的博客
08-13 724
推荐使用：Paper CSS，前端打印新体验 paper-cssPaper CSS for happy printing项目地址:https://gitcode.com/gh_mirrors/pa/paper-css 在当今前端技术日新月异的时代，我们几乎每天都在谈论“前端”。但你是否思考过，如何让前端技术完美触达打印领域？今天，我们带来了一位轻量级的解决方案明星——Paper CSS，它将改变...
CSS控制打印
xiasheng的专栏
02-16 392
&lt;html&gt;     &lt;head&gt;     &lt;meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5"&gt;     &lt;title&gt;CSS打印控制&lt;/title&gt;     &lt;meta http-equiv="Content-
通过html和css实现打印分页控制
crazyXB的博客
12-25 2713
通过html和css实现打印分页控制，用到的属性为page-break-before和page-break-after
打印样式CSS的技巧和要点
Just Code
11-08 685
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果： 使用响应式布局设置打印的效果 打印背景图片和颜色，在合适的时候 添加显示的网址或页面链接，以供参考 使用css filter 提高打印的图形效果   针对打印的样式，而不是屏幕显示样式 首先，我们需要使用媒体查询（media query）针对 打...
css-print：CSS打印
02-05
在网页设计领域，CSS（Cascading Style Sheets）不仅用于控制屏幕上的视觉表现，还扮演着...在数字出版和HTML出版中，理解并熟练掌握CSS打印技术至关重要，它能提升用户体验，使内容在任何介质上都能保持高质量的呈现。
pagedown：使用CSS打印R MarkdownHTML输出以进行打印
02-03
使用CSS for Print对R MarkdownHTML输出进行分页。 您只需要现代的网络浏览器（例如Google Chrome）即可生成PDF。 无需安装LaTeX即可获取精美的PDF。 这个R包站在两个巨头的肩膀支持R Markdown文档CSS排版： 和 ...
CSS2 打印属性让打印HTML文档不出问题
01-19
打印属性 打印 HTML 文档总是会出现问题。在 CSS2 中，我们可以借助打印属性让打印 web 内容更容易一些。 属性 描述 值 orphans 设置元素放在页面底部时所允许的最少文本行数。 number marks 设置是否在内容区之外...
CSS控制页面打印
03-11
CSS控制页面打印，可分页
简单介绍CSS设置打印页面的方法及css里media的使用
01-21
在很多是时候往往要打印网页中的某一部分，而不是全部网页，所以告诉打印机要打印的部分，使用css进行一下设置是一个比较好的方式，先看一段代码: 复制代码代码如下:<link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” /> <link href=”css/print.css” rel=”stylesheet” type=”text/css” media=”print” /> 以上两行代码是引入外部css样式表，需要特别主义的是media属性值分别是screen和print，用来规定css样式表要服
html5print:HTML5，CSS，JavaScript漂亮打印
05-06
漂亮的打印HTML以及其中嵌入CSS和JavaScript 精美打印纯CSS和JavaScript 尝试修复碎片化HTML5 尝试使用损坏的unicode编码修复HTML 尝试猜测文档的编码，并且在某些情况下设法将8位字节代码转换回正确的UTF-8...
html打印效果,PrintCss控制打印效果_html/css_WEB-ITnose
weixin_31526891的博客
06-03 745
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。因此如果要精确的控制打印效果就应该使用print css。接下来，我们来先了解一些语法。语法@media 描述: @media用于指定的设备类型使用不同的样式。语法：@media sMedia { ...
用于打印时的CSS
junmail的专栏
08-19 162
一、直接写在页面中 &lt;style media=print&gt;    .Noprint{display:none;}    .PageNext{page-break-after: always;}    &lt;/style&gt;   二、写在CSS文件里 @media   print {.Noprint{display:none;}    .PageNext{page-br...
利用CSS控制打印
微笑的黄捷
08-17 847
@media print{INPUT {display:none}}每页都有的表头表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内
html如何设置提交打印页面,简单介绍CSS设置打印页面的方法及css里media的使用
weixin_34220317的博客
06-03 405
在很多是时候往往要打印网页中的某一部分，而不是全部网页，所以告诉打印机要打印的部分，使用css进行一下设置是一个比较好的方式，先看一段代码:以上两行代码是引入外部css样式表，需要特别主义的是media属性值分别是screen和print，用来规定css样式表要服务的对象，如果属性值是media，则说明是为了在屏幕控制页面的显示，如果属性值是print，则说明css代码是用于控制需要打印的元素的样...
css对打印的支持
JAVA_HOME_NEW的博客
06-08 215
我们可以通过 链接两个外部样式来控制 页面打印时的样式 和 显示样式。 如： <link rel="stylesheet" href="lighthouse.css" media="screen"> <link rel="stylesheet" href="lighthouseprint.css" media="print"> 2.在移动设备上可以通过 <met...
html用css设置a4大小进行打印
06-07
要在 HTML 页面中使用 CSS 设置 A4 大小进行打印，您可以按照以下步骤进行操作： 1. 在 CSS 文件中设置页面大小为 A4 大小： ```css @media print { @page { size: A4; } } ``` 这个代码块告诉浏览器在打印时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值