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

代码如下:

<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>

赞 (0)

相关推荐

  • Java实现Html转Pdf的方法

    本文实例讲述了Java实现Html转Pdf的方法.分享给大家供大家参考.具体如下: package test; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import org.xhtmlrenderer.pdf.ITextFontResolver; import org.xhtmlrenderer.pdf.ITextRenderer; import com.lowagie.

  • jsPDF导出pdf示例

    jsPDF貌似不支持中文 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en&q

  • JavaScript+Java实现HTML页面转为PDF文件保存的方法

    需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入  html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var

  • 将html页面保存成图片,图片写入pdf的实现方法(推荐)

    需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入  html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var

  • 解决linux下zip文件解压乱码问题

    原因 由于zip格式并没有指定编码格式,Windows下生成的zip文件中的编码是GBK/GB2312等,因此,导致这些zip文件在Linux下解压时出现乱码问题,因为Linux下的默认编码是UTF8. 解决方案一 使用7z解压. 安装p7zip和convmv # fedora $ su -c 'yum install p7zip convmv' # ubuntu $ sudo apt-get install p7zip convmv 执行一下命令解压缩 # 使用7z解压缩 $ LANG=C 7

  • 纯js实现html转pdf的简单实例(推荐)

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试

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

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>jsPDF</title> <script type="text/javascript" src="jspdf.js"></script> <s

  • 使用jspdf生成pdf报表

    由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化. 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js html2canvas.js jspdf.plugin.autotable.js 前台动态生成的chart现在一般是用的html5的canvas或者是svg,很不幸运,我遇到的是svg, 如果是flash没研究过. 由于报表还需要保持原html页面的外观,但

  • Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题

    Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题

    项目地址:https://github.com/PythonerKK/django-generate-pdf/tree/master 这个demo实现了通过用户输入自己的个人信息生成一份简历pdf,来阐述如何使用Django的HttpResponse生成PDF的文档. 先上效果图: 安装依赖库 首先安装Django最新版2.2.2和PDF依赖包xhtml2pdf pip install django pip install xhtml2pdf 编写表单验证 为了简单起见,这个demo依赖数据库,

  • Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法

    项目地址:https://github.com/PythonerKK/django-generate-pdf/tree/master 这个demo实现了通过用户输入自己的个人信息生成一份简历pdf,来阐述如何使用Django的HttpResponse生成PDF的文档. 先上效果图: 安装依赖库 首先安装Django最新版2.2.2和PDF依赖包xhtml2pdf pip install django pip install xhtml2pdf 编写表单验证 为了简单起见,这个demo依赖数据库,

  • PHP在网页中动态生成PDF文件详细教程

    PHP在网页中动态生成PDF文件详细教程

    本文详细介绍使用 PHP 动态构建 PDF 文件的整个过程.使用免费 PDF 库 (FPDF) 或 PDFLib-Lite 等开源工具进行实验,并使用 PHP 代码控制 PDF 内容格式. 有时您需要准确控制要打印的页面的呈现方式.在这种情况下,HTML 就不再是最佳选择了.PDF 文件使您能够完全控制页面的呈现方式,以及文本.图形和图像在页面上的呈现方式.遗憾的是,用来构建 PDF 文件的 API 不属于 PHP 工具包的标准部件.现在您需要提供一点帮助. 当您在网络上搜索,寻找对 PHP 的

  • PHP中使用TCPDF生成PDF文档实例

    实际工作中,我们要使用PHP动态的创建PDF文档,目前有许多开源的PHP创建PDF的类库,今天我给大家来介绍一款优秀的PDF库,它就是TCPDF,TCPDF是一个用于快速生成PDF文件的PHP5函数包.TCPDF基于FPDF进行扩展和改进,增强了实用功能. 特性 TCPDF具有以下特性: 1.支持页面页脚: 2.支持HTML标签代码: 3.支持jpg/png/gif/svg图形图像: 4.支持表格: 5.支持中文字符:(有些PDF类不支持中文或者处理中文相当麻烦) 6.自动分页,自动页码,等等.

  • phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)

    首先在命令行创建一个PhoneGap工程 复制代码 代码如下: phonegap create . "jspdf.sample" "JSPDF App"phonegap local plugin add org.apache.cordova.filephonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git 然后,下载JSPDF代码 down

  • itext生成PDF设置页眉页脚的实例详解

    itext生成PDF设置页眉页脚的实例详解

    itext生成PDF设置页眉页脚的实例详解 实例代码: /** * ITextTest * iText生成PDF加入列表,注释等内容,同时设置页眉和页脚及页码等. */ package com.labci.itext.test; import java.awt.Color; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import com.lo

  • iReport生成pdf打印的实例代码

    先下载ireport版本 ,我下载的是 iReport-5.0.4  编辑模板  employees_identity_print_templet @RequestMapping("printEmpPdf") @ResponseBody public Result printEmpPdf(HttpServletRequest request,HttpServletResponse response, Parameter parameter){ Result result=Result.

  • 使用pyecharts生成Echarts网页的实例

    pyecharts是一个封装百度开源图表库echarts的包,使用pyecharts可以生成独立的网页,也可以在flask.django中集成使用. 示例如下: from pyecharts import Bar attr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", &quo

随机推荐