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

相关文章

  • 原生JS实现悬停下拉菜单

    原生JS实现悬停下拉菜单

    这篇文章主要为大家详细介绍了原生JS实现悬停下拉菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS实现多物体缓冲运动实例代码

    JS实现多物体缓冲运动实例代码

    这篇文章主要介绍了JS实现多物体缓冲运动实例代码,有需要的朋友可以参考一下
    2013-11-11
  • Bootstrap 3浏览器兼容性问题及解决方案

    Bootstrap 3浏览器兼容性问题及解决方案

    这篇文章主要为大家详细介绍了 Bootstrap 3 浏览器兼容性问题及其对应的解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • javascript 通过封装div方式弹出div窗体

    javascript 通过封装div方式弹出div窗体

    废话少说,此js对象是通过封装页面上的div,将其弹出,可以弹出多个,参考了一些高人代码,达到我要的效果。先看看效果图。配合一css就可以很好看了。
    2009-10-10
  • javascript getElementByTagName的使用

    javascript getElementByTagName的使用

    javascript getElementByTagName当鼠标放上去时将超链接的颜色设为蓝色的。
    2009-06-06
  • 如何检测JavaScript的各种类型

    如何检测JavaScript的各种类型

    在写js脚本的时候我们必须对一件事保持警惕,就是避免异常的发生。在本篇文章里面,我想谈谈一部分类型检测,有需要的可以参考学习。
    2016-07-07
  • JavaScript实现点击切换验证码及校验

    JavaScript实现点击切换验证码及校验

    这篇文章主要为大家详细介绍了JavaScript实现点击切换验证码及校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 基于JavaScript实现Tab选项卡切换效果

    基于JavaScript实现Tab选项卡切换效果

    这篇文章主要介绍了基于JavaScript实现Tabs选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript类型检测的方法实例教程

    JavaScript类型检测的方法实例教程

    这篇文章主要给大家介绍了关于JavaScript类型检测的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Openlayers+EasyUI Tree动态实现图层控制

    Openlayers+EasyUI Tree动态实现图层控制

    这篇文章主要为大家详细介绍了Openlayers+EasyUI Tree动态实现图层控制,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论