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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
在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
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
OpenCV实现人脸识别
2017/04/07 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python 字符串与数字输出方法
2018/07/16 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python3学生名片管理v2.0版
2018/11/29 Python
python计算导数并绘图的实例
2020/02/29 Python
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
渡河少年教学反思
2014/02/12 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
SQL Server中搜索特定的对象
2022/05/25 SQL Server
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL