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中string转date示例代码
Nov 01 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
p5.js入门教程之键盘交互
2018/03/19 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python实现弹窗祝福效果
2019/04/07 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
仲裁协议书
2014/09/26 职场文书
财务检查整改报告
2014/11/06 职场文书
体检通知范文
2015/04/21 职场文书