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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
php无限级分类实现方法分析
2016/10/19 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
详解Vue之事件处理
2020/07/10 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python实现图片文件批量重命名
2020/03/23 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
在python中使用nohup命令说明
2020/04/16 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
介绍一下Ruby的特点
2013/01/20 面试题
财务分析个人的自荐书范文
2013/11/24 职场文书
党校培训思想汇报
2014/01/03 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
人力资源部工作计划
2019/05/14 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
MySQL COUNT函数的使用与优化
2021/05/10 MySQL