页面打印插件 jquery.jqprint.js 插件使用实例

最新推荐文章于 2024-05-27 16:13:02 发布

敲代码的大雄

最新推荐文章于 2024-05-27 16:13:02 发布

阅读量2k

点赞数 1

分类专栏：学习笔记插件使用文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_34217386/article/details/118090576

版权

学习笔记同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

插件使用

4 篇文章 0 订阅

订阅专栏

页面打印插件 jquery.jqprint.js 插件使用实例

jquery.jqprint.js 插件下载

jqprint 是一个基于jQuery编写的页面打印的一个小插件，可以对页面指定元素的内容进行打印，使用非常方便。

很多小伙伴使用的时候会出现 “Cannot read property ‘opera’ of undefined” 错误问题，这是jqery使用版本过高出现的兼容问题。
这时候需要引入 jquery 迁移辅助插件 <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script> 即可解决。

页面使用demo

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <!-- 引入打印样式 -->
<!--    <link th:href="@{/static/css/print.css}" rel="stylesheet" type="text/css" media="print">-->
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <!-- 解决jq迁移兼容问题 -->
    <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script th:src="@{/static/js/jquery.jqprint-0.3.js}"></script>
</head>
<body style="padding: 20px;" >

<p>打印表单</p>
<div id="table_html" style="text-align: center;">
    <table class="layui-table color-success">
        <colgroup>
            <col width="100">
            <col width="200">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>动漫</th>
            <th>主角</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>猫和老鼠</td>
            <td>Tom & Jerry</td>
        </tr>
        <tr>
            <td>2</td>
            <td>蜡笔小新</td>
            <td>野原新之助</td>
        </tr>
        <tr>
            <td>3</td>
            <td>足球小将</td>
            <td>大空翼</td>
        </tr>
        <tr>
            <td>4</td>
            <td>宠物小精灵</td>
            <td>小智</td>
        </tr>
        </tbody>
    </table>
</div>
<div style="text-align: center">
    <button class="layui-btn" id="print_btn">打印table</button>
</div>


<script type="text/javascript">
    $("#print_btn").click(function(){
        $("#table_html").jqprint({
            //debug 如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
            debug: false,
            //importCSS true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
            importCSS: true,
            //printContainer 表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）
            printContainer: true,
            //operaSupport 表示如果插件也必须支持谷歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
            operaSupport: true
        });
    });
</script>

</body>
</html>

页面展示效果

在这里插入图片描述

打印效果

在这里插入图片描述

敲代码的大雄

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面打印插件 jquery.jqprint.js 插件使用实例

jquery.jqprint.js 插件使用实例jquery.jqprint.js 插件下载jqprint 是一个基于jQuery编写的页面打印的一个小插件，可以对页面指定元素的内容进行打印，使用非常方便。很多小伙伴使用的时候会出现 “Cannot read property ‘opera’ of undefined” 错误问题，这是jqery使用版本过高出现的兼容问题。这时候需要引入 jquery 迁移辅助插件 <script src="http://www.jq22.com/jquery/
复制链接

扫一扫