jsPDF生成pdf后在网页展示实例


Posted in Javascript onJanuary 16, 2014
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
<title>jsPDF</title> 
<script type="text/javascript" src="jspdf.js"></script> 
<script type="text/javascript"> 
window.onload=function(){ 
var doc = new jsPDF(); 
//var doc = new jsPDF('landscape');//横排 doc.setProperties({//设置文档属性 
title: 'Title', 
subject: 'This is the subject', 
author: 'Dragon', 
keywords: 'javascript, web 2.0, ajax', 
creator: 'MEEE' 
}); 
doc.setTextColor(0,255,0); 
doc.setFontSize(22); 
doc.setFont("times"); 
doc.setFontType("italic"); 
doc.text(20, 20, 'Hello world!');//添加文字 
doc.setTextColor(255,0,0); 
doc.setFontSize(16); 
doc.setFont("helvetica"); 
doc.setFontType("bold"); 
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); 
doc.addPage();//添加页 
doc.setLineWidth(1);//设置线宽 
doc.setDrawColor(0,255,0);//设置画笔颜色 
doc.setFillColor(255,0,0);//设置填充颜色 
doc.line(60, 20, 115, 60);//画线,两个坐标 
doc.rect(100, 50, 20, 30); //画矩形,左上角坐标,宽度,高度,只有边框 
doc.ellipse(20, 20, 20, 10, 'F');//画椭圆,中心点坐标,宽度,高度,只有边 
doc.circle(120, 20, 20, 'FD');//画圆,中心点坐标,半径,边框和填充都有 
doc.triangle(100, 100, 110, 100, 120, 130, 'FD'); 
//doc.output('datauri');//直接输出为新的web页 
document.getElementById("iframe123").src = doc.output('datauristring');//在iframe中显示 
} 
</script> 
</head> 
<body> 
<iframe id="iframe123" frameborder="0" width="400" height="500"></iframe> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
详解tween.js的使用教程
Sep 14 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 #Javascript
js获取某元素的class里面的css属性值代码
Jan 16 #Javascript
JS可以控制样式的名称写法一览
Jan 16 #Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 #Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 #Javascript
利用浏览器全屏api实现js全屏
Jan 16 #Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
跨浏览器的事件对象介绍
2012/06/27 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python将字符串转换成数组的方法
2015/04/29 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Django web框架使用url path name详解
2019/04/29 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python网络编程之五子棋游戏
2020/05/14 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
银行党员批评与自我批评
2014/10/15 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
茶花女读书笔记
2015/06/29 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS