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

最新推荐文章于 2023-06-16 11:34:35 发布

做我的code吧

最新推荐文章于 2023-06-16 11:34:35 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：前端 jqprint 浏览器打印

本文链接：https://blog.csdn.net/yueguangMaNong/article/details/103481741

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

文章目录

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

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

插件

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

点击进入github地址

使用

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

demo

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

<html>
<head>
  ...
  <!--  必须在加载插件之前先加载jquery  -->
  <script src="./common/js/jQuery.print.min.js"></script>
  ...
</head>

<body>
<!--  tag标签内的内容为需要打印的部分  -->
<div class="tag" id="tag">
    <div class="left-box">
      <!--  此处为html代码，省略  -->
    </div>
    <div class="right-box">
      <!--  此处为html代码，省略  -->
    </div>
</div>
</body>
</html>

打印tag区域的内容

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

最终效果

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

做我的code吧

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用jqprint打印网页指定区域的内容

使用jqprint打印浏览器指定区域的内容文章目录使用jqprint打印浏览器指定区域的内容插件使用demo最终效果根据工厂的需求，要在浏览器上打印执行一系列操作之后，打印出一个标签，贴在包装盒上。本人也是第一次做浏览器打印的开发，做个笔记记录一下过程，方便以后回顾插件百度了一大圈，发现有很多打印方案，有直接调用浏览器的，有需要提前安装插件的，有适配IE的。我这里选的是jquer...
复制链接

扫一扫