BoyTNT的博客_前端技术

页面导出为PDF文件时为每页增加页眉页脚

接上篇文章， https://blog.51cto.com/boytnt/2479378，本来已经加好页眉了，觉得本话题已经终止了，然后又有人问如何加页脚，这个，同理啊，往页面底部放对象就好了，之前页眉放了logo，这回页脚放文本吧。还是先上效果图：再放代码，其实和上一篇相比只加了一行，就是第50行的pdf.text()：<!DOCTYPE html><html>

PDF

原创 2021-11-26 13:21:28 4098 阅读 1评论

页面导出为PDF文件时为每页增加页眉

接上篇文章，https://blog.51cto.com/boytnt/2324214，有人问到如何给每页加页眉，其实思想很简单，比如页眉上想添加logo，那就在jspdf创建每页时多加个图片上去就好了。先上效果图：再放代码，主体还是上篇文章的分页导出算法：<!DOCTYPE html> <html> <head> <meta charset="utf

jspdf

原创 2020-03-17 16:14:43 3471 阅读 2点赞 1收藏

页面直接导出为PDF文件，支持分页与页边距

将WEB页面直接导出为pdf文件是经常会用到的一个功能，尤其是各种报表系统。总结了一下目前几种主流的做法：在后端用代码生成pdf文件，比如iText一类；在后端抓取页面并生成pdf文件，比如phantomjs一类；在前端用js直接生成pdf文件；方案3的优势在于前端直接生成，所见即所得。今天要探索的就是html2canvas和jspdf，前者用于将页面元素render生成canvas，后者用于将c

jspdf

51cto

原创 2018-11-30 12:18:16 10000+阅读 1点赞 3评论

IE11下使用fixed定位时鼠标滚动不平滑

很久不用IE了，近期做兼容性测试发现一个fixed定位的问题，当元素使用fixed定位时，其应该不随页面滚动，在chrome/firefox/edge下都很完美，元素完全不动，但是使用IE11时，如果使用鼠标滚轮，元素会先随页面一起移动位置，然后再回到原位，产生抖动问题，但用鼠标拖动滚动条时则没问题。这个问题肯定不是代码问题，问题出在IE设置上，IE11默认开启“平滑滚动”功能，需要手工关闭，具体

IE11

fixed

原创 2018-10-08 10:29:18 2851 阅读

jquery实现数字滚动效果

网页上如果有数字需要经常变动，又想让它比较明显，肯定是加个动画比较显眼，利用jquery的animate可以很容易的实现，不需要css3，因此可以兼容低版本的ie浏览器。先看效果图：代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码：<!DOCTYPE html> <html lang="zh-cn"> <head> &nb

jquery

滚动效果

数字滚动

原创 2015-03-11 13:52:45 10000+阅读 1点赞 3评论

利用HTML5分片上传超大文件

在网页中直接上传大文件一直是个比较头疼的问题，主要面临的问题一般包括两类：一是上传时间长中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件。比较理想的方案是能够把大文件分片，一片一片的传到服务端，再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4M

大文件

html5

原创推荐 2014-09-15 10:33:09 10000+阅读 2点赞 2评论

用Raphael在网页中画圆环进度条（简化版）

上篇写了用Raphael画圆环进度条（http://boytnt.blog.51cto.com/966121/1074215），这一篇把它简化一下，只画一条比较粗的弧，优点是简单，缺点是不能做渐变色了。先上效果图，其实也不差是吧：然后是代码，基本思想与上一篇完全相同： <!DOCTYPE html PUBLIC "-//W3C//DTD&

圆环进度条

原创 2012-11-30 10:44:11 2030 阅读 1点赞 3评论

用Raphael在网页中画圆环进度条

条状的进度条我们见得太多了，实现起来比较简单，它总是长方形的，在方形的区域里摆放就不太好看了。随着css3的出现，圆环状的进度条开始用得越来越多，不过由于IE6/7/8不支持css3，我们只能换其它方法来实现。本文就采用Raphael来画一个，这个组件对svg和vml进行了一个统一的封装，根据浏览器使用不同的技术实现绘制，因此IE也能用。先上效果图：效果还不错吧？代码其实也不复杂，抛砖引玉一下：&

圆环进度条

原创推荐 2012-11-29 17:04:18 5633 阅读 1点赞 1评论

深入了解iPad上的MouseEvent

本文转自 http://www.cnblogs.com/hokyhu/archive/2012/01/18/2325833.html iPad上没有鼠标，所以手指在触发触摸事件（TouchEvent）的时候，系统也会产生出模拟的鼠标事件（MouseEvent）。这对于普通网页的浏览需求而言，基本可以做到与PC端浏览器无明显差异。但是如果你正在做一款与用户有着强交互的WebAPP程序，

ipad

转载精选 2012-11-15 11:34:05 1510 阅读

写给兔小白的js教程(5)

又上课啦，和上一次隔的时间有点长，就当是放暑假了吧。前一段时间在研究icm的过程中，兔小白应该发现了脚本经常是以对象的形式出现的，今天我们就来看一看这种方式与之前的写法有什么不同。前几课里，我们定义一个方法时，都是直接写function，比如： function add(x, y){ //.......&nbs

javascript

js教程

原创 2012-07-31 13:17:01 1750 阅读 3点赞 3评论

jQuery将不再支持IE6/7/8

刚在jQuery的官网上看到发展规划，jQuery从2.0起将不再支持IE6/7/8了，具体的声明如下： jQuery 2.0 (early 2013, not long after 1.9): This version will support the same APIs as jQuery 1.9 does, but removes support for IE 6/7/8 oddities

jQuery

原创 2012-07-03 14:05:52 1456 阅读

写给兔小白的js教程(4)

又上课啦，控制语句里还差一个switch...case，我们今天讲完它，然后要开始正式讲方法啦。 switch的行为其实与if很接近，我们看看它的语法...

javascript

原创 2012-06-13 16:19:21 1701 阅读 2点赞

写给兔小白的js教程(3)

昨天兔小白太忙了，没有完成家庭作业，没关系，今天讲的东西比较简单，给兔子一个缓冲的时间。今天继续讲语句，来看看用得第二多的循环语句吧。 1、for循环语句 for循环语句可以将某段代码反复执行一定的次数，我们直接用例子讲语法。比如我们要在页面上连续跳10次提示框，可以这么写： for(var i = 0;i < 10;++i){

javascript

原创 2012-06-06 15:11:14 2257 阅读 1点赞 1收藏 1评论

写给兔小白的js教程(2)

叮铃铃，上课啦~~ 昨天的家庭作业兔小白完成得不错，今天开始我们要正式学习语法了。老规矩，后面会有小游戏等着兔子哟~~ 1、javascript中的常量与变量所有编程语言都会涉及这两个概念，所谓常量就是值不变的固定数据，变量就是值可以按需要变化的数据，兔有Perl的基础，应该不难理解。我们来看几个例子，加深一下理解： //用var定义一个变量number，把整型常量100赋给它，

javascript

js教程

原创 2012-06-05 12:59:33 2304 阅读

写给兔小白的js教程(1)

最近我家兔小白要转行学javascript了，不过又懒得抱着大本的书死啃语法，于是只好为兔宝写篇教程了。生物书上讲，大段的文字对兔子有催眠效果，因此本教程争取以有趣的示例为主，防止兔子睡着。没有兔子基因的物种以及高手们请绕道，因为本教程真的不会写出什么新鲜东西来，嘿嘿。先上个小游戏吧，名字叫“追逐兔小白的兔小灰”，游戏中移动鼠标就能移动兔小白，而兔小灰会不停的追兔小

javascript

原创 2012-06-04 16:06:01 3623 阅读 5点赞 5评论

全局模式下的正则表达式

在全局模式（global）下使用正则表达式，有一些需要特别注意的地方，先来看一段有意思的代码： <script> var reg = /\d/g; var str = "1"; alert(reg.test(str)); //应该弹出true al

职场

正则表达式

休闲

全局模式

原创 2012-03-16 16:56:56 2114 阅读

帅气的UglifyJS

之前一直用YuiCompressor来处理CSS和JS文件压缩，不过最令人头疼的是对于一些写得不太规范的脚本，YUI经常会出错，最近发现了一个叫uglifyjs的东东，试了一下，超赞，压缩率很高，目前还没发现不能压缩或压缩后语义出错的问题。首先要说明的是uglifyjs是为node.js准备的，所以先要准备node.js环境才能用，在windows环境下用的话，先去下载node.exe，位置h

uglifyjs

原创 2012-02-28 10:27:34 4431 阅读

IE6 CSS的一个bug

使用#id.className形式定义css样式时，在IE6下，有bug，以相同id定义的多个#id.className,在IE6中只认识第一个。示例如下： <style type="text/css"> #btn.openClass{ color:green;&nb

ie6 bug

转载精选 2012-02-17 17:36:30 1123 阅读 1点赞 2评论

网页中的虚拟table

在网页中用table加载大量数据是件痛苦的事，效率太低了，对内存的占用也太大了。联想到C#中用到的DataGridView的虚拟模式，试着在网页中用html+js实现了一个，没仔细测，通用性封装也不好，给大家抛块砖而已。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans

职场

休闲

虚拟表格

原创 2012-02-08 17:29:46 1783 阅读 1点赞

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

兔子窝

页面导出为PDF文件时为每页增加页眉页脚

页面导出为PDF文件时为每页增加页眉

页面直接导出为PDF文件，支持分页与页边距

IE11下使用fixed定位时鼠标滚动不平滑

jquery实现数字滚动效果

利用HTML5分片上传超大文件

用Raphael在网页中画圆环进度条（简化版）

用Raphael在网页中画圆环进度条

深入了解iPad上的MouseEvent

写给兔小白的js教程(5)

jQuery将不再支持IE6/7/8

写给兔小白的js教程(4)

写给兔小白的js教程(3)

写给兔小白的js教程(2)

写给兔小白的js教程(1)

全局模式下的正则表达式

帅气的UglifyJS

IE6 CSS的一个bug

网页中的虚拟table

欢迎