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去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
vue环境搭建简单教程
Nov 07 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
AngularJS的ng-click传参的方法
2017/06/19 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
vue 左滑删除功能的示例代码
2019/01/28 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python查看数据类型的方法
2019/10/12 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python实现自动签到脚本功能
2020/08/20 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
音乐学个人的自荐书范文
2013/11/26 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
促销活动总结
2014/04/28 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
学生会干部任命书
2015/09/21 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
Golang入门之计时器
2022/05/04 Golang