JavaScript代码生成PDF文件的方法


Posted in Javascript onFebruary 26, 2016

如何使用js生成pdf文件呢?相信很多朋友都被这一问题迷惑着,下面由三水点靠木小编通过本文给大家简单介绍下。

可以使用javascript生成PDF的类库?jsPDF,先下载jsPDF-0.9.0rc2下载地址:;请点这里 ,以下是完整实例代码:

<!doctype>
<html>
<head>
<title>jsPDF</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../jspdf.js"></script> 
</head> 
<body>
<iframe frameborder="0" width="500" height="400"></iframe>
<script>
$(document).ready(function() {
var pdf = new jsPDF('p','in','letter')
, sizes = [12, 16, 20]
, fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']]
, font, size, lines
, margin = 0.5 // inches on a 8.5 x 11 inch sheet.
, verticalOffset = margin
, loremipsum = ' ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id eros turpis. Vivamus tempor urna vitae sapien mollis molestie. Vestibulum in lectus non enim bibendum laoreet at at libero. Etiam malesuada erat sed sem blandit in varius orci porttitor. Sed at sapien urna. Fusce augue ipsum, molestie et adipiscing at, varius quis enim. Morbi sed magna est, vel vestibulum urna. Sed tempor ipsum vel mi pretium at elementum urna tempor. Nulla faucibus consectetur felis, elementum venenatis mi mollis gravida. Aliquam mi ante, accumsan eu tempus vitae, viverra quis justo.\n\nProin feugiat augue in augue rhoncus eu cursus tellus laoreet. Pellentesque eu sapien at diam porttitor venenatis nec vitae velit. Donec ultrices volutpat lectus eget vehicula. Nam eu erat mi, in pulvinar eros. Mauris viverra porta orci, et vehicula lectus sagittis id. Nullam at magna vitae nunc fringilla posuere. Duis volutpat malesuada ornare. Nulla in eros metus. Vivamus a posuere libero.'
// Margins:
pdf.setDrawColor(0, 255, 0)
.setLineWidth(1/72)
.line(margin, margin, margin, 11 - margin)
.line(8.5 - margin, margin, 8.5-margin, 11-margin)
// the 3 blocks of text
for (var i in fonts){
if (fonts.hasOwnProperty(i)) {
font = fonts[i]
size = sizes[i]
lines = pdf.setFont(font[0], font[1])
.setFontSize(size)
.splitTextToSize(loremipsum, 7.5)
// Don't want to preset font, size to calculate the lines?
// .splitTextToSize(text, maxsize, options)
// allows you to pass an object with any of the following:
// {
// 'fontSize': 12
// , 'fontStyle': 'Italic'
// , 'fontName': 'Times'
// }
// Without these, .splitTextToSize will use current / default
// font Family, Style, Size.
//console.log(lines);
pdf.text(0.5, verticalOffset + size / 72, lines)
verticalOffset += (lines.length + 0.5) * size / 72
}
}
var string = pdf.output('datauristring');
$('iframe').attr('src', string);
});
</script>
</body>
</html>

以上内容给大家介绍了JavaScript代码生成PDF文件的方法,希望对大家有所帮助!

Javascript 相关文章推荐
js获取上传文件大小示例代码
Apr 10 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
canvas实现图像截取功能
Feb 06 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 #Javascript
自动完成的搜索框javascript实现
Feb 26 #Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 #Javascript
js去字符串前后空格的实现方法
Feb 26 #Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 #Javascript
超实用的JavaScript表单代码段
Feb 26 #Javascript
理解javascript中Map代替循环
Feb 26 #Javascript
You might like
php实现的递归提成方案实例
2015/11/14 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python实现飞机大战微信小游戏
2020/03/21 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
学生感冒英文请假条
2014/02/04 职场文书
《春雨》教学反思
2014/04/24 职场文书
我的老师教学反思
2014/05/01 职场文书
四则混合运算教学反思
2016/02/23 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python