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 相关文章推荐
JQuery中getJSON的使用方法
Dec 13 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 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.MVC的模板标签系统(五)
2006/09/05 PHP
用cookies来跟踪识别用户
2006/10/09 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
AngularJS入门之动画
2016/07/27 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python实现自动重启本程序的方法
2015/07/09 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
python中round函数保留两位小数的方法
2020/12/04 Python
生产车间主任的个人自我鉴定
2013/10/25 职场文书
挂职思想汇报
2013/12/31 职场文书
政府采购方案
2014/06/12 职场文书
水利水电专业自荐信
2014/07/08 职场文书
八项规定对照检查材料
2014/08/31 职场文书
实习单位证明范例
2014/11/17 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
vue修饰符.capture和.self的区别
2022/04/22 Vue.js