可打印页面特定元素的jquery打印插件printThis

可打印页面特定元素的jquery打印插件printThis
printThis一款优秀的jQuery打印插件,具有多种特性,如: 打印页面中特定的或者多个DOM元素、保留页面CSS 样式或添加新的CSS样式;保留表单元素,支持画布打印(实验中)。

入门指南

使用教程

引入依赖库

  <!-- jQuery依赖 -->
  <script type="text/javascript" src=".path/to/jquery/3.3.1/jquery.min.js"></script>
  <!-- printThis依赖 -->
  <script type="text/javascript" src=".path/to/printThis.js"></script>

简单示例-打印所有内容

HTML

<div class="demo">
    <p>//TODO 要打印的内容</p>
    <img id="kitty-one" alt="cute kitten" src="assets/images/cat1.jpg" />
    <img class="u-pull-left" id="kitty-two" alt="cute kitten" src="assets/images/cat2.jpg"/>
    <img class="u-pull-right" id="kitty-three" alt="cute kitten" src="assets/images/cat3.jpg"/>
    <p>//TODO 更多打印的内容</p>
</div>

脚本初始化

$('.demo').printThis();

高级示例-只打印图片

HTML

<div class="demo">
    <p>//TODO 要打印的内容</p>
    <img id="kitty-one" alt="cute kitten" src="assets/images/cat1.jpg" />
    <img class="u-pull-left" id="kitty-two" alt="cute kitten" src="assets/images/cat2.jpg"/>
    <img class="u-pull-right" id="kitty-three" alt="cute kitten" src="assets/images/cat3.jpg"/>
    <p>//TODO 更多打印的内容</p>
</div>

脚本初始化

$('#kitty-one, #kitty-two, #kitty-three').printThis({
  importCSS: false, //打印时不使用样式
  header: "<h1>自定义打印标题!</h1>"
});

更多使用方法请参考官方文档:https://github.com/jasonday/printThis

the end