用css打印html

時間 2019-12-08

標籤 css 打印 html 欄目 CSS 简体版

原文原文鏈接

需求背景

最近接到一個需求，就是打印整個html頁面，並且要保證打印出的每一張A4紙的內容是規律的，不能出現截斷的這種現象出現(前一頁的內容跑到後一頁去了)。css

利用 paper css 這個樣式表，並作一些簡單的配置就能夠完成此類需求html

paper-css是一個用純css的方式來完成打印相關任務的庫，裏面並不包含js邏輯。git

以A4紙爲例。github

首先在head標籤裏引入樣式庫ajax

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">
複製代碼

而後在style標籤中加入以下這句spa

<style>@page { size: A4 }</style>
複製代碼

再爲body元素添加值爲A4的classcode

<body class="A4">
複製代碼

最後再爲每一頁的包裹元素上，例如div或者section上添加值爲「sheet」的classcdn

<section class="sheet">
複製代碼

這樣編寫完以後，每個class爲sheet的section在打印時就是單獨的一頁。你能夠在section裏裝載任何你須要的標籤元素htm

paper-css不只提供了A4紙這一種規格，同時還提供了A3，A5，PDF等格式。blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。