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 easyui的tabs使用时的问题
Mar 23 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
如何设置mysql允许外网访问
2013/06/04 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python如何绘制疫情图
2020/09/16 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
美国健康和保健平台:healtop
2020/07/02 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
运动会通讯稿50字
2014/01/30 职场文书
小学生开学感言
2014/02/28 职场文书
亲属关系公证书样本
2015/01/23 职场文书
2016大一新生军训感言
2015/12/08 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Java设计模式中的命令模式
2022/04/28 Java/Android