原生JS打印插件之jQuery.EasyPrint.js使用文档_js自动打印,js打印插件资源-CSDN下载

共3个文件

js：2个

html：1个

javascript

前端打印

5星 · 超过95%的资源需积分: 12 3 浏览量 2022-07-21 19:17:30 上传评论 1 收藏 11KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

jquery.easyPrint.demo.zip （3个子文件）

jquery.easyPrint.html 13KB

jquery.easyPrint.min.js 6KB

jquery.easyPrint.js 12KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>页面打印</title> <link href="//res.layuion.com/layui/v/2.7.5/css/layui.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* 页面单独设置的样式 */ a { color: blue !important; } .setting-css { background-image: linear-gradient(#FFCF02, #FF7352); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; /*需要文字透明*/ font-size: 22px; } </style> </head> <body> <div style="text-align: center; margin: 0;"> <p> 我是元素外面的，不需要打印的；3秒后自动打印，如需手动 <a href="#" onclick="myPrint()">打印</a> </p> </div> <div id="print-elem"> <div style="text-align: center; margin: 20px 0;"> <h2>页面打印案例</h2> </div> <blockquote class="layui-elem-quote">一、以下是layui内置样式：</blockquote> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码框</label> <div class="layui-input-inline"> <input type="password" name="password" value="" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">辅助文字</div> </div> <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> <select name="city"> <option value=""></option> <option value="100">北京</option> <option value="200" selected="selected">深圳</option> <option value="300">上海</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <div class="layui-input-block"> <input type="checkbox" name="like[write]" title="写作" checked> <input type="checkbox" name="like[read]" title="阅读" checked> <input type="checkbox" name="like[dai]" title="发呆"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <div class="layui-input-block"> <input type="checkbox" name="switch" lay-skin="switch" checked> <input type="checkbox" name="switch" lay-skin="switch"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <br /> <br /> <blockquote class="layui-elem-quote">二、未渲染的表单：</blockquote> <div style="padding: 0 20px;"> <div> <input type="text" value="未渲染的表单" /> </div> <div> <span> <input type="radio" name="sex111" value="0" /> 男 </span> <span> <input type="radio" name="sex111" value="1" checked="checked" /> 女 </span> </div> <div> <span> <input type="checkbox" name="aihao" value="0" /> 看书 </span> <span> <input type="checkbox" name="aihao" value="1" checked="checked" /> 羽毛球 </span> </div> <div> <select name="address"> <option value="1">北京</option> <option value="2" selected="selected">深圳</option> </select> </div> <div> <textarea rows="3" cols="15">未渲染的表单---文本域</textarea> </div> </div> <br /> <br /> <blockquote class="layui-elem-quote">三、以下是图片：</blockquote> <div style="width: 200px; height: 200px;"> <img src="http://www.xingxingbao.com/jianbihua/image/201709/2017090515362353.jpg" style="width: 100%;" /> </div> <blockquote class="layui-elem-quote">四、以下是SVG：</blockquote> <div style="width: 200px;"> <svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="linearGradient-1-2" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"> <stop stop-color="#FCFCFD" offset="0%"></stop> <stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient> <linearGradient id="linearGradient-2-2" x1="0%" y1="9.5%" x2="100%" y2="90.5%"> <stop stop-color="#FCFCFD" offset="0%"></stop> <stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient> <rect id="path-3-2" x="0" y="0" width="17" height="36"></rect></defs> <g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="B-type" transform="translate(-1268.000000, -535.000000)"> <g id="Group-2" transform="translate(1268.000000, 535.000000)"> <path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path> <polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon> <g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"> <polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon> <polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon> <rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-2)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect> <polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g> <rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-2)" x="13" y="45" width="40" height="36"></rect> <g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"> <mask id="mask-4-2" fill="white"> <use xlink:href="#path-3-2"></use></mask> <use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-2"></use> <polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-2)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g> <polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg> </div> <br /> <br /> <blockquote class="layui-elem-quote">五、以下是canvas：</blockquote> <div style="padding: 0 20