利用jqprint插件打印页面内容的实现方法-编程语言|编程教学|编程知识|编程|hysql编程教学
您好！欢迎来到我的博客！
hysql.org技术站
当前位置： >
利用jqprint插件打印页面内容的实现方法
客户需要在页面有一个打印按钮，点击之后可以打印Echarts图表的内容以及文字提示信息，经谷歌搜索发现，实现方法大概有三种之多，其他两种不太熟悉，而采用的这种打印方式是一个在jQuery的基本上开发的一个print插件，因此可以使用jQuery的方式查找元素，因此决定采用这种方式。
先看一下实现的效果图，如下：
实现效果图
引入js文件
&script type="text/javascript" src="__JS__/jquery-migrate-1.2.1.min.js"&&/script&
&script type="text/javascript" src="__JS__/jqprint-0.3.js"&&/script&
注意：这里是先引入的jQuery文件，如果没有引入第一个js文件的话，会出现兼容性问题，导致使用jqprint打印时报错。
这里面的html标签很多的
&div class="wrap-content container" id="container"&
&table border="0" cellpadding="0" cellspacing="0" class="store-joinin baseinfo"&
&th colspan="40"&用户信息&/th&
&tr style="background: rgb(255, 255, 255);"&
&th&姓名：&/th&
&td colspan="40"&&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&性别：&/th&
&td colspan="40"&男&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&年龄：&/th&
&td colspan="40"&41&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&身份证：&/th&
&td colspan="40"&01059X&/td&
&tr style="background: rgb(255, 255, 255);"&
&th&所属机构：&/th&
&td colspan="40"&上海市政法委&/td&
&button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button"&打 印&/button&
当然下面还有很多的html标签，在这里就不展示了。
打印按钮点击之后执行的函数
function btnPrintClick(){
var imgBox = $('#img_box');
var chartBox = $('#main');
if (imgBox.length &= 0) {
chartBox.after('&div id="img_box"&&/div&');
imgBox = $('#img_box');
// 将echart生成图片并放入img-box，并显示图片img-box
imgBox.html('& img src="' + myChart.getDataURL() + '"/&').css('display','block');
// 隐藏echart图chart-box
chartBox.css('display','none');
// 调整img大小
var img = imgBox.find('img');
var imgWidth = img.width();
var showWidth = 1000; // 显示宽度，即图片缩小到的宽度
if (imgWidth & showWidth) { // 只有当图片大了才缩小
var imgNewHeight = img.height() / (imgWidth / showWidth);
img.css({'width': showWidth + 'px', 'height': imgNewHeight + 'px'});
var imgBox2 = $('#img_box2');
var chartBox2 = $('#main2');
if (imgBox2.length &= 0) {
chartBox2.after('&div id="img_box2"&&/div&');
imgBox2 = $('#img_box2');
// 将echart生成图片并放入img-box，并显示图片img-box
imgBox2.html('& img src="' + myChart2.getDataURL() + '"/&').css('display','block');
// 隐藏echart图chart-box
chartBox2.css('display','none');
// 调整img大小
var img2 = imgBox2.find('img');
var img2Width = img2.width();
var show2Width = 1000; // 显示宽度，即图片缩小到的宽度
if (img2Width & show2Width) { // 只有当图片大了才缩小
var img2NewHeight = img2.height() / (img2Width / show2Width);
img2.css({'width': show2Width + 'px', 'height': img2NewHeight + 'px'});
$("#TestQuestions").jqprint();
// 执行打印后再切换回来
// 显示echart图chart-box
chartBox.css('display','block');
chartBox2.css('display','block');
// 隐藏图片img-box
imgBox.css('display','none');
imgBox2.css('display','none');
注意事项：
这里使用了图片的缩放比例的方式。比如Echarts图表要显示的内容特别多的话，一般在html页面中采用的是在X轴上使用滚动条的方式，但是打印时可以将Echarts图表先转换成图片，并等比例进行缩放，打印完毕之后再还原回来即可。
任何不需要打印的标签都可以先隐藏。对于不需要出现在打印页面的标签内容，我们在打印之前使用jQuery查找到对应的元素，将该元素隐藏起来，打印结束之后，再将隐藏的元素显示出来即可。
debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
operaSupport: false //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:web的各种前端打印方法之jquery打印插件jqprint实现网页打印Jqprint实现页面打印
相关拓展：网页开发手记：486个JavaScript网页特效详解内容简介本书涵盖了目前网络开发涉及的所有方向，从页面、文本、窗口、鼠标、日期时间等基本应用，到图像、滚动条、进度条、网络验证、文件处理等深入应用，包括目前最流行的异步传输、Property框架、Ajax和DOM等高级技术。全书共分23章，包括486个常用JavaScript实例。每个实例都提供了代码分析及效果演示，可以帮助读者轻松掌握JavaScript的开发技巧，并从中找到网站开发的乐趣。
下一篇：没有了
9840042访问次数QQ 为什么不可以和 telegram 一样永久保存聊天记录并同步呢？ - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
QQ 为什么不可以和 telegram 一样永久保存聊天记录并同步呢？
· 174 天前用 Android 发布 · 9309 次点击
是出于什么原因呢？
117 回复 &| &直到
02:36:09 +08:00
& &174 天前 via Android
& &174 天前
因为没有竞品.
& &174 天前
也许是为了一定程度地逃避监管？比如微信聊天记录的产品设计
& &174 天前 via Android
@ 没理解和用户量有什么关系，可以说说吗
& &174 天前
QQ 会员可以设置针对部分好友的信息永久漫游（保存和同步）。设置的人数和 VIP 等级有关。
& &174 天前
@ 存储这些数据是有成本的，怎么会和用户量无关呢
& &174 天前
@ 微信的记录不是对监管有留口子吗
& &174 天前
@ 对腾讯来说， 这些成本不值一提吧
& &174 天前
@ 所以说是为了让大家冲会员吗 哈哈
& &174 天前
@ 再大的公司，也不会说这些成本不值一提的，实际项目操作中，这些成本都是要考量的因素。
& &174 天前
@ 说不值一提确实不对， 但是同步消息我觉得是一个提高用户体验的功能，如果说只因为成本就放弃是不是不太对
& &174 天前
会员不是可以同步消息吗
& &174 天前
@ 刚刚看到， 但是最久好像只能两年，而且保存聊天记录是一款通讯软件的基本功能吧，现在还得充个 SVIP
& &174 天前
@ QQ 日活 5 个亿，平均一个用户一天聊天记录 1kB，一天就是 500G，一年 200T况且人日均 1kB 都少算了太多，图片、视频动辄都是几十上百兆……公司运维成本都是一点点抠下来的，商业的本质是赚钱，又不是做慈善 ╮(╯_╰)╭
& &174 天前
有没有永久保存那是不知道的，至于永久同步那是不可能的，
& &174 天前
& &174 天前
telegram 还是靠私人捐赠的的公司。
& &174 天前
你需要 VIP
& &174 天前
@ 商业公司不考虑成本考虑什么，所以成本和用户体验折中以后，就是“请买 VIP ”了。我收钱，提供更好的服务，有收入才能支撑成本。
& &174 天前
@ 我是对比 telegram 来说的， 刚刚查到 tg 的月活是 1.7 亿，是比 QQ 差好多
& &174 天前
之前 SVIP 是支持永久同步的，大概一年前阉割到了 2 年，但我觉得还是值得去买的
& &174 天前
@ 好吧， 可能我不懂商业吧 0-0
& &174 天前 via Android
微信表示同步聊天记录是什么能吃么qq 开个会员就能保存很长时间已经很良心了
& &174 天前
@ 体量大到一定程度就必然会做取舍。TG 体量还远没达到 QQ 或者微信那么大，QQ 月活将近 9 亿，日活 5 亿，如果按同比例算，TG 月活 1.7 亿，日活也就 1 亿。且 TG 如果开启了端对端私密聊天的话，聊天记录是记录在 local 的，无云端备份，这个数据占比能有多少不清楚，但多少是有影响的。还要其他技术细节没细查不清楚。况且存储只是一方面，海量数据存储后索引，读写、都是开销，还要多端同步，带宽开销也很大。像腾讯这种大体量公司还要考虑数据灾备。要你是小马哥，看到这些开销也肉疼。
& &174 天前 via iPhone
成本不重要？腾讯内部专门有个金算盘奖奖励内部团队做出的成本优化呢。QQ 这么大盘子成本优化挤一挤就是上千万，而且查看多年前聊天记录绝对是极小众需求，多数号称需要的人也只是心理需要并不是真的用的到。Dropbox 的 packrat 不也干掉了么，”无限流量 /无限存储”在商业上真的是出力不讨好的行为
& &174 天前
@ 另外，你猜为啥腾讯取消了人工客服，道理是一样的，日活 5 个亿，人工客服率如果万分之一（已经很低了），一天就是 5 万个电话。按一个人工客服每天工作 10 小时，平均每个客服电话接听时长 3 分钟，一个人工客服一天的受理量撑死 200 个（实际上根本达不到，这要求客服人员完全没休息时间）那么需要同时配 250 个客服，才能完成日常客服量。一个客服月薪算 3000，一个月客服工资开销就是 75 万，一年 900 万。这还是在人工客服率算到万分之一，且客服人员满负荷不休息接听电话。以及，没算客服人员各种其他金险福利、工位、电话使用开销等。所以啊，只要肯动手查动脑想，简单算算经济账，很多问题不需要问人，自己就能找到答案。
& &174 天前
@ 这么一说也是哎， 是我欠考虑了
& &174 天前
@ 这么一说成本确实很高，就像楼上说的“查看多年前聊天记录绝对是极小众需求”， 是我欠考虑了。那可以说说 telegram 吗？如果日活很高了，tg 要怎么处理呢，他们还是非盈利性的，应该会更难吧
& &174 天前
刚我查了下我电脑上大约 6 年的 QQ Message 文件夹大小 约 100 多 G 应该只是正常水平 平时用 QQ 仅限于工作
& &174 天前
@ TG 实际的技术实现细节我不了解，所以不敢妄加评价。但随着用户量增长以及时间推移，累计历史数据越来越多迟早会面临这个问题。再牛逼的技术公司你也没法打破基本的物理限制不是（当然未来谁也说不准，笑）。
& &174 天前 via Android
航母为什么不能像潜艇一样潜水？没有为什么。
& &174 天前 via Android
@ #14 那 telegram 是用爱发电吗？并不是喔
& &174 天前
& &174 天前
@ 主要是我也确实不知道 TG 的技术和商业细节，但我就像我后面回复的，随着用户量增长和时间推移，如果 TG 的云端存储策略不变，一定会面临存储成本问题，只是看他们自己怎么平衡支出了。腾讯的情况就相对明了，一个典型的商业公司，效益指标下达到具体的部门，就得开源节流搞利润不是。
& &174 天前
@ 说起来还是很佩服 TG 的， 也谢谢你的回复～
& &174 天前
@ 为什么你 6 年还不换电脑。这固态盘寿命都到了。
& &174 天前
给你免费了，企鹅帝还是企鹅帝？
& &174 天前
还水(?_?)，更新文档去啦
& &174 天前 via Android
说存储成本那都是扯淡，卖会员才是真的
& &174 天前 via Android
telegram 也会丢失一些消息，之前看别人在自己的 channel 刷了很多图，后来前面就翻不到了
& &174 天前 via iPhone
你给企鹅交了多少钱？同步数据存储数据等等 都需要巨大的成本你给企鹅交钱了麽？
& &174 天前 via iPhone
这些成本对企鹅来说是小数目？你确定这些数目是多少？海量的用户 每天产生多少数据 你统计过嘛？
& &174 天前 via Android
@ 呀，你是 elu..?
& &174 天前 via iPhone
而且不光是每天的量，还有长年累月不断地累积，日复一日，这个持续维护的成本，后面的担子只会越来越重，这个成本你算过吗？大公司的一点很小的决策，对成本的影响都是巨大的，(因为用户量太大)，不是你想的那么简单。
& &174 天前
@ 话是这样说， 但作为用户，也不需要完全站在腾讯的立场上吧（确实小看了海量用户带来的数据
& &174 天前 via Android
google photo 应该算是实现永久、全部同步了吧
& &174 天前 via iPhone
定时导出存到微云，马总省回去的你赚回来
& &174 天前
存储应该是永久存的，就是不给你查~
& &174 天前
存储成本能有多高，同步的流量费用还差不多
& &174 天前 via iPhone
@ tg 是存服务器的，谢谢，而且是多端同步，可以当云盘用
& &174 天前
@ @ 以前会员有永久漫游聊天记录，现在也取消了，哭笑不得
& &174 天前 via iPhone
@ 开启端对端私密聊天是不同步的吧
& &174 天前 via iPhone
@ 非端对端私密存云端服务器这个我知道呀。我也没否认 TG 这么干的嘛。只是说在跟 LZ 解释用户量大到一定数量级就一定会碰到成本问题，商业公司为了降低成本做功能割舍是很正常的考量，至于 TG 是如何考虑的我也一再表示我不了解详细情况不便发表意见。但如果说 TG 存云端完全不考虑成本只能说大佬有钱任性。这里面没有对错，只有取舍。
& &174 天前
经过楼上某大佬的解释，我终于觉得 QQ 会员不贵了。。。
& &174 天前
如果 QQ 能做到像 TG 那样好，付个会员钱我觉得一点不过分。多主机登录，消息云端长期存储，所有表情包自动同步，不知道有生之年能不能在 QQ 上看到了。当然其实这些都无所谓了，自从几年前的动漫群大量无故被封，到最近麻将群大量无故被封，我也没打算把 QQ 作为唯一根据地了。周围的小伙伴都开始陆陆续续转 TG 了，至少不会一封了就全失联了。
& &174 天前
顺便问下手机上怎么用电报 谢谢
& &174 天前
@ 同步为什么不可能呢？其实我希望是短期保存记录并同步
& &174 天前
@ 小米的应用商店和 Google Play 搜索下载就可以啊
& &174 天前
@ 谢谢回复， 使用电报不用 fq 吗
& &174 天前 via iPhone
但是为什么 QQ 不给一个导出聊天记录的选项？我自己承担储存成本不行么？就是卡着你卖会员罢了
& &174 天前
因为 QQ 的技术不如 Telegram，没错，虽然腾讯很大，看起来很牛逼，但是技术并没有多牛逼，实用主义而已
& &174 天前 via Android
@ 当然要啊
& &174 天前
还是腾讯不想做 没有竞品
& &174 天前
@ 你可以用电脑导出
& &174 天前 via iPhone
架构问题？
& &174 天前 via iPhone
不知道十年前的聊天记录有没有存下来。说起来国内这些公司属于给钱也买不到有些服务，比如 FB 和 Twitter 有个下载自己所有发言的功能，QQ 空间和微博死活都没有...
& &174 天前 via iPhone
先充钱开通会员再说。不解释。
& &174 天前 via Android
@ #60 有导入导出，不过我在使用上，数据量达到 2g 就经常崩溃了，不算好用
& &174 天前 via iPad
@ Mac 端好像导不出去？
& &174 天前
@ qq 的 msgdb 不就是本地聊天记录……直接导入试过么。
& &174 天前 via iPad
@ 但是现在我的聊天记录大部分在 iPhone 上，Mac 上也有一大部分，搞得我 QQ 都不敢删了重装，一删全没了…
& &174 天前
QQ 聊天记录是要求强制保留 5 年，这个由不得你说成本，一些重要的 qq 号记录是终身，这些数据需要一些级别的部门才能去申请权限去调阅，普通用户不让导出这么久估计是成本考虑，至于会员这个事情是顺带收一下钱，再说大公司去买存储跟你去买的价格不一样，他们本身就有很多闲置资源，这个东西做了实际上一点不亏本，因为有一些利益不是钱能衡量的！@
& &174 天前 via iPhone
收藏一下等个 TG 会员
& &174 天前 via iPad
@ 请问保留五年是内部消息还是公开信息？
& &174 天前 via iPad
长久来讲所有信息都有可能丢的，至少对用户来说是会看不到的。以前有各公司，只要每年花几十美元就能提供无限云存储服务，后来这个公司倒了，数据全没了……
& &174 天前 via iPhone
@ 咦，关于存储五年这个点算涨姿势了，谢谢指教。
& &174 天前
你们都是从技术和成本的角度看这个问题，实际上国家要求企业强制保存记录最少半年以上，企鹅这种重点公司，至少会被要求保存 2-3 年记录方便回溯。而且你们不要忘了企鹅有专门的接口对接国家暴力部门的，那边可不会考虑啥成本问题，硬盘不够就买
& &174 天前
肯定都存了，不想给你罢了。国关的同学去面试部委，人家有你大学入学以来所有 im 的聊天记录。
& &174 天前
就是因为 VIP / SVIP 能够永久漫游聊天记录，所以我才一直维持 VIP 状态近 10 年。不过，最近貌似 SVIP 也只能维持两年了，准备到期就不续费了。
& &174 天前
其实就是企鹅观念土鳖。im 从 90 年代发展到现在都 20-30 年了，企鹅从来没有任何激进的设计。qq 保守，微信也保守。再加上屏蔽了国外的同类 im，用户也麻痹了。
& &174 天前
@ 越大的公司 应该越看重成本才对啊
& &174 天前
原来本地记录和漫游记录是分得很开的，本地的直接导出备份很方便直到和云端的合并之后，我已经搞不清楚导出的部分到底 ，云端的有没有同步过来（如果没有同步的话典型的问题就是，聊天记录搜不到，还需要自己手动翻页同步一次）
& &174 天前
@ #13 @ #79 漫游记录不止保存两年，两年限制是针对手机端的，手机端只能选择同步 2 年的，电脑端可以同步所有的漫游记录，我刚试了下 2012 年的聊天记录现在也能同步过来
& &174 天前
@ #72 你们都站着说话不腰疼啊。啥叫价格不一样，买块硬盘就能跑么？要机房维护，坏盘更换，电费，宽带费，IT/程序员费用，主备冗余，特殊灾害损失（台风天，水淹，电涌，光缆被挖而且内部有核算成本，各个业务线要自负盈亏的，利润下来了，连部门都不一定能保住。说白了，TG 只是用的人少，你丢给他 2 亿日活，看他还敢存所有数据么。都是做生意，都在乎成本收益，除了网监（滑稽
& &174 天前 via iPhone
如果只是出于成本太高的原因，完全可以帮助用户备份到其他 /自家云存储，然后用户自己支付云存储的费用，参见 WhatsApp。我觉得不支持主要还是优先级不够高，费力实现，又没有太多对公司的好处。
& &174 天前
肯定存了，就是不给，不然怎么配合公安局政府啥的。不过存多少年的就不知道了。整个楼也没有个 QQ 项目组的来解惑。
& &174 天前
@ 简单搜了一下并没有找到关于 QQ 消息保存 5 年的网页，这个说法是怎么来的？
& &174 天前
还是那句话 免费习惯了 有些东西就变得理所应当了
& &173 天前
@ 牛 X，居然能保存这么久
& &173 天前
成本及回报问题～
& &173 天前
@ 一天能产生多少数据量？给你翻个倍，按一年 10000t 算吧，咱们按 300/TB 价格计算（也就是零售端的报价，集采成本不知道能降多少），一年多少成本？ 300 万？你觉得这个算成本？对于一个互联网企业的核心资产，这个算成本？ 2016 年年报披露，电脑设备项下添置 58.77 亿元，这个 0.03 亿也就是个零头中的零头。哦对了，成本里大头是员工费用和内容指出、无形资产摊销，所有的硬件+托管费+带宽费加起来只是前面那几项的零头。科技公司靠压硬件成本挣钱？？？不免费提供信息保存，根本就不是一个成本问题，而是一个商业模式问题。你不区分对待用户，凭什么让用户花钱买服务？免费就能得到所有服务，谁还花钱？intel i3 和 i7 成本差多少？一个道理。
& &173 天前
@ 首先呢，我估算时候底数是算的很小的，只是为了能呈现用户积累后的成倍增长效应，具体数据多少，我并不是腾讯 QQ 员工，我不好说。其次，即使您那算到的 300W 预算，像 T 家这样的体量，摊算到部门时也不是忽略不计的成本。何况实际的可能消耗可能远远高于这个数字。另外，所谓的「核心资产」这点我也并不敢苟同。用户层面，这个需求很弱，为了一个很弱的需求去花费额外的成本和承担可能的大风险，对腾讯这样的公司来说是不值当的。如果说是想来做用户模型，数据建模，sample 一段时间的数据做训练足够了。当然，我也同意您提到的这是商业模式问题这个论点，这也是我一直说的，存不存无所谓对错，只是商业取舍。一点浅见，见笑见笑
& &173 天前
Facebook Messager 就是永久保存聊天记录并同步，聊天记录全平台自动漫游同步月活跃用户突破 13 亿 ( 1.3 Billion monthly, 70 Million daily )WeChat with 938 million monthly users as of May 2017, China ’ s QQ with 861 million monthly users as of Q1 2017
& &173 天前
腾讯的团队协作工具 TIM 升级高级版后，QQ 聊天记录可以保存 2 年邀请你免费升级 TIM 高级帐户来自:TIM
& &173 天前
q 聊天记录在服务端肯定有保存的，不然公安断案怎么调出来…不过就是不给你看
& &173 天前
又不是做慈善的，又没花钱。我记得以前好像是什么 svip 是永久
& &173 天前
收费才可以、才能够持续的、稳定的提供更好的服务。
& &173 天前
以前 gtalk 的聊天记录就是永久存储的
& &173 天前
超级会员的钱无可厚非 问题是超级会员也只能保存 2 年...
& &173 天前
& · & 3222 人在线 & 最高记录 3762 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.1 · 24ms · UTC 02:52 · PVG 10:52 · LAX 19:52 · JFK 22:52? Do have faith in what you're doing.请问您QQ多少，能给讲解一下网页利用html和jq播放PPT吗_百度知道
请问您QQ多少，能给讲解一下网页利用html和jq播放PPT吗
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
你的回答被采纳后将获得：
系统奖励15（财富值+成长值）+难题奖励20（财富值+成长值）
请轻亲青草
请轻亲青草
采纳数：25
获赞数：12
擅长：暂未定制
为你推荐：
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。