搜索
简帛阁>技术文章>页面打印插件 jquery.jqprint.js 插件使用实例

页面打印插件 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/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}"></span></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 <span>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>

页面展示效果

打印效果

页面打印插件jqueryjqprintjs插件使用实例jqueryjqprintjs插件下载jqprint是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容进行打印使用非常
业务场景客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基本
<scriptlanguagejavascriptsrcjquery144minjs></script><scriptlanguagejavascriptsrcjquer
需求在进行网页开发中不可避免会使用打印功能,下面就来学习一下一款简单易用的插件吧!下载地址GitHub官网个人分享配置参数你可以在调用打印方法时传入一些参数:$(myElementId)print
(function($){varprintAreaCount0;$fnprintAreafunction(){varele$(this);varidPrefixprintArea_;removePri
服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了。ajaxfileuploadjs是一款jQuery的异步上传文件插件
任务:解决vue页面局部打印功能printjs插件,可以打印html、pdf、json数据官网:https://printjscrabblycom/一个整理的很好的讲解:https://wwwjian
插件下载:https://githubcom/GBKS/WookmarkjQuery官方主页:http://wwwwookmarkcom/jqueryplugin下载插件后,在网页中引用插件JS文件
unlockjs插件具有以下特点:滑动解锁。尺寸、颜色、字体大小等都可以个性化定制。完成解锁后会有回调函数,用来触发进一步的数据处理。如何使用1首先在页面中引入unlockcss和unlockjs文
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息。尝试过使用$post,$ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资