文章目录
  1. 1. 应用场景
  2. 2. Continuous media vs Paged media
  3. 3. Paged media 主要的一些的CSS
  4. 4. 注意事项
  5. 5. 参考

应用场景

对于一个前端的开发人员,当我们做业务时,可能会涉及到生成单据这样的一些功能。这个时候我们就会考虑用什么方案来生成文件去打印呢?用怎样一个方案更好呢?

根据我们的考虑,我们首先提出几个标准

  1. 修改更新样式方便。
  2. 前端的学习成本更小。

对于第一个标准。显然直接把内容生成图片格式(jpeg,png等),再打印图片的这种方案就不是很灵活。因为单据的内容是动态,画图,划线的的位置需要根据文字的不同而更改,自己来控制就很麻烦。

对于第二个标准。把内容直接生成word,pdf,然后打印文档这种方案,要求前端重新学习word格式或者pdf格式。而且要很熟据悉,这个也是很花学习时间的。

那么怎样,既修改方便,有学习成本小呢?其实直接使用 html + css就可以。我们可以使用html来做,然后利用浏览器的打印功能,直接打印网页,或者由网页来生成pdf, 而且CSS是针对打印机是有特殊设置的。所以通过打印功能生成pdf,把pdf作为最终单据的文件格式是可以的。

那我们就来介绍下这种方案的使用和注意事项:

Continuous media vs Paged media

默认情况下网页一般通过浏览器,显示在显示屏上的,是一个在连续的页面上,是可以滚动的,显示器这种媒介也就连续的媒介( Continuous media)。 但是对于打印机,网页是打印在一页一页纸张的,是分页的。所以打印机是分页的媒介(Paged media)。

大家都知道 html在浏览器这种连续媒介里面的布局模型是盒子模型(Box Model)。对于分页媒介来说,这个模型html的布局模型有什么不同吗?

  1. 分页媒体的每一页中可打印与不可打印的区别

Page Sheet

由于打印机的机械机制原因,纸张中有一部分是不可打印的,通常是纸张的边沿部分。

  1. 分页媒体的盒子模型也是分页,每一页都是一个页盒子(Page Box)

Page Box

Paged media 主要的一些的CSS

  1. 仅仅针对Paged media @page
  2. 纸张的左右页面是使用伪类来是实现 :left :right
  3. 纸张的第一页 :first
  4. 匹配空白页面 :blank
  5. 匹配页面上的位置 top-left-corner top-left top-right
  6. 设置页面页码 counter(page) counter-increment
  7. 设置纸张大小 比如 size: A4 landscape
  8. Media query @media print

注意事项

  1. 单据通常不需要scale的,只需要固定大小就可以。为了更准确的size,减少打印网页的选项,你通常可以指定页面的size, 纸张的打印方向

    1
    2
    3
    @page {
    size: A4 landscape;
    }
  2. 对于可编辑的字段,可以使用 input textarea 这些元素,对于textarea需要有些特殊设置

    1
    2
    3
    input, textarea {
    resize:none; //去掉 textarea的右下角的拉伸的三角
    }

texarea编辑支持自动增高, 可以用autosize

1
autosize($('textarea'))

textarea有多行内容在打印的效果下,textarea估算高度和使用p元素放同样的内容的估算高度是不一样的,在textarea 下会导致显示不全。所以这个时候可以tricky 的使用两个元素存放同一个内容

1. 默认显示p元素,
2. 点击p,隐藏p,显示textarea,把p的内容给textarea
3. textarea时区焦点后,把textarea的内容给p元素,隐藏textarea,显示p元素
4. 打印的时候用的就是p
  1. page的 header 和footer 的高度是通过margin 来设置

参考

CSS Paged Media Module Level 3

文章目录
  1. 1. 应用场景
  2. 2. Continuous media vs Paged media
  3. 3. Paged media 主要的一些的CSS
  4. 4. 注意事项
  5. 5. 参考