JavaScript代码生成PDF文件的方法

 更新时间:2016年02月26日 11:09:18   投稿:mrr  
如何使用js生成pdf文件呢,下面通过本文给大家分享JavaScript代码生成PDF文件的方法,需要的朋友参考下吧

如何使用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文件的方法,希望对大家有所帮助!

相关文章

  • Bootstrap每天必学之级联下拉菜单

    Bootstrap每天必学之级联下拉菜单

    Bootstrap每天必学之级联下拉菜单,主要应用场合有省市级关联菜单等,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • VsCode插件自动生成注释插件koroFileHeader使用教程

    VsCode插件自动生成注释插件koroFileHeader使用教程

    这篇文章主要介绍了VsCode插件自动生成注释插件koroFileHeader使用教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • JavaScript验证知识整理

    JavaScript验证知识整理

    本文主要介绍了JavaScript验证的相关知识整理。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Swiper 4.x 使用方法(移动端网站的内容触摸滑动)

    Swiper 4.x 使用方法(移动端网站的内容触摸滑动)

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,这里为大家简单介绍一下Swiper4的用法,需要的朋友可以参考下
    2018-05-05
  • Web表单提交之disabled问题js解决方法

    Web表单提交之disabled问题js解决方法

    这篇文章主要介绍了Web表单提交之disabled问题js解决方法,分析了通过js解决保存值也能保留用户不能输入的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • js特殊字符过滤的示例代码

    js特殊字符过滤的示例代码

    本篇文章主要是对js特殊字符过滤的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • ES6深入理解之“let”能替代”var“吗?

    ES6深入理解之“let”能替代”var“吗?

    这篇文章主要介绍了关于ES6之"let"能替代"var"的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06
  • 微信小程序实现二维码签到考勤系统

    微信小程序实现二维码签到考勤系统

    这篇文章主要介绍了微信小程序实现二维码签到考勤系统,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • JavaScript给事件委托批量添加事件监听详细流程

    JavaScript给事件委托批量添加事件监听详细流程

    事件委托,一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数
    2021-10-10
  • Js实现滚动变色的文字效果

    Js实现滚动变色的文字效果

    滚动变色的文字js特效,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,需要的朋友可以参考下
    2014-06-06

最新评论