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判断浏览器是否是IE的比较好的办法
May 08 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
JS实现页面打印功能
Mar 16 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript实现颜色渐变的方法
2013/10/30 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Seajs源码详解分析
2019/04/02 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python的gevent框架的入门教程
2015/04/29 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Django接收自定义http header过程详解
2019/08/23 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
会计主管岗位职责
2014/01/03 职场文书
住宅质量保证书
2014/04/29 职场文书
说明书格式及范文
2014/05/07 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2014全年工作总结
2014/11/27 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android