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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
十佳青年个人事迹材料
2014/01/28 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
励志演讲稿大全
2014/08/21 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
撤诉状格式范本
2015/05/19 职场文书
2015年测量员工作总结
2015/05/23 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
go语言中http超时引发的事故解决
2021/06/02 Golang
php解析非标准json、非规范json的方式实例
2022/05/10 PHP