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 相关文章推荐
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
JS实现简单的九宫格抽奖
Jun 28 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函数utf8转gb2312编码
2006/12/21 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
SQL Server笔试题
2012/01/10 面试题
校园餐饮创业计划书
2014/01/10 职场文书
个人简历中自我评价
2014/02/11 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
交心谈心活动总结
2015/05/11 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android