开源Gutenberg: 把网页展示成标准打印样式
<p style="text-align: center;"><img src="https://simg.open-open.com/show/94707533793eccb585a83e623a55ca59.png"></p> <p>Modern framework to print correctly</p> <h2>How to use</h2> <p>Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg.css is the base stylesheet but there are themes available in the themes folder.</p> <p>Example with Gutenberg and "old style" theme :</p> <pre> <link rel="stylesheet" href="dist/gutenberg.css" media="print"> <link rel="stylesheet" href="dist/themes/oldstyle.css" media="print"> <!-- optional --></pre> <p><img src="https://simg.open-open.com/show/26330a0b1df184593923e88a98245b3a.png"></p> <p>Comparison between standard print (left) and Gutenberg (middle, Modern style and right, Old style)</p> <h2>npm</h2> <p>Gutenberg is available on npm</p> <pre> npm install gutenberg-css</pre> <h2>CDN</h2> <p>You can also use the unpkg service as a <em>CDN</em> .</p> <pre> <link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.4" media="print"> <link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.4/dist/themes/oldstyle.min.css" media="print"></pre> <h2>What does the framework do ?</h2> <h3>Hide elements</h3> <p>To hide elements to be printed you can simply add the class no-print .</p> <h3>Force break page</h3> <p>Gutenberg provides two ways to break a page, the class page-break-before will to break before and page-break-after to break after.</p> <p>Example:</p> <pre> <!-- The title will be on a new page --> <h1 class="page-break-before">My title</h1> <p class="page-break-after">I will break after this paragraph</p> <!-- Break here, the next paragraph will be on a new page --> <p>I am on a new page</p></pre> <h3>Not reformat links or acronym</h3> <p>If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you can use the class no-reformat .</p> <h3>Force to print background</h3> <p>To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome) :</p> <pre> -webkit-print-color-adjust: exact; print-color-adjust: exact;</pre> <h2>Dev</h2> <ol> <li>npm install to install dependencies</li> <li>gulp watch to "watch" the scss folder and compile to css</li> </ol> <p> </p> <p> </p> <p> </p>
本文由用户 AraASD 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!