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 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
angular之ng-template模板加载
Nov 09 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
vue-router传参用法详解
Jan 19 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 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
基于Zookeeper的使用详解
2013/05/02 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
初识Javascript小结
2015/07/16 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
深入理解ES7的async/await的用法
2017/09/09 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python 函数基础知识汇总
2018/03/09 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
教师业务学习制度
2014/01/25 职场文书
公务员综合考察材料
2014/02/01 职场文书
学生请假条
2014/04/11 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
明确岗位职责
2015/02/14 职场文书
2015年防汛工作总结
2015/05/15 职场文书
一般纳税人申请报告
2015/05/18 职场文书
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript