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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
实现无刷新联动例子汇总
May 20 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
JavaScript中10个Reduce常用场景技巧
Jun 21 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
jquery弹出框的用法示例(2)
2013/08/26 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
实例解析Array和String方法
2016/12/14 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python环境变量设置方法
2016/08/28 Python
Python中list初始化方法示例
2016/09/18 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
Python可以实现栈的结构吗
2020/05/27 Python
Linux Interview Questions For software testers
2013/05/17 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
采购类个人求职的自我评价
2014/02/18 职场文书
倡议书范文
2014/04/16 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
python实现简单聊天功能
2021/07/07 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL