使用jqprint打印网页指定区域的内容

淩亂°似流年 2023-06-20 15:55 340阅读 0赞

# 使用jqprint打印网页指定区域的内容 #

### 文章目录 ###

*  使用jqprint打印网页指定区域的内容
 *   *   *  插件
         *  使用
         *  demo
         *  最终效果

> 根据工厂的需求，要在浏览器上打印执行一系列操作之后，打印出一个标签，贴在包装盒上。  
> 本人也是第一次做浏览器打印的开发，做个笔记记录一下过程，方便以后回顾

### 插件 ###

> 百度了一大圈，发现有很多打印方案，有直接调用浏览器的，有需要提前安装插件的，有适配IE的。  
> 我这里选的是jquery插件 `jQuery.print`

*  [点击进入github地址][github]

### 使用 ###

1.  引入插件
2.  给需要打印的部分添加一个id属性（如果不是打印整个页面）
3.  js选中指定区域，调用打印

### demo ###

> 先在html中引入插件，必须放在jquery的位置后面，然后在需要局部打印的地方设置id，这里设置的id为`tag`

> 打印`tag`区域的内容

// 获取需要打印的区域html
    var html = $("#tag").html();
    // 调用打印
    $.print(html, {
        
        debug: false,
        globalStyles: true,     // 是否使用父文档的样式表
        iframe: true,
        importCSS: true,       
        printContainer: false,
        operaSupport: false
    });

### 最终效果 ###

1.  浏览器操作界面  
    ![操作界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70]
2.  打印预览的效果（只有标签的内容，不包含其他元素）  
    ![打印预览效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70 1]

[github]: https://github.com/DoersGuild/jQuery.print
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191210195407861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191210195445285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1ZWd1YW5nTWFOb25n,size_16,color_FFFFFF,t_70