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控制文本框textarea输入字数限制的方法
Jun 17 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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控制器中操作视图js的方法
2016/07/04 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
深入浅出学习python装饰器
2017/09/29 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python将unicode和str互相转化的实现
2020/05/11 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python和c语言哪个更适合初学者
2020/06/22 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
财务部岗位职责
2013/11/19 职场文书
写自荐信的注意事项
2014/03/09 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
博士生求职信
2014/07/06 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
SQL基础的查询语句
2021/11/11 MySQL
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫