JavaScript代码生成PDF文件的方法

如何使用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文件的方法，希望对大家有所帮助！

赞 (0)

相关推荐

  • 利用iText在JSP中生成PDF报表

    问题的由来 前不久做了一个通过JSP生成PDF报表的小项目,算得上开了一次眼界.企业的一些信息通过网络形成Html报表,虽然IE可以直接打印显示在其中的内容,但是从界面上来看,如果直接将Html的显示结果打印出来,显得不太美观.如果将它转成PDF文件再打印,则打印效果会好很多. iText简介 iText是一个开放源码的Java类库,可以用来方便地生成PDF文件.大家通过访问http://sourceforge.net/project/showfiles.php?group_id=15255&r

  • 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

  • 使用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页面的外观,但

  • JSP生成WORD文档，EXCEL文档及PDF文档的方法

    本文实例讲述了JSP生成WORD文档,EXCEL文档及PDF文档的方法.分享给大家供大家参考,具体如下: 在web-oa系统中,公文管理好象不可或缺,有时需要从数据库中查询一些数据以某种格式输出来,并以word文档的形式展现,有时许多word文档保存到数据库中的某个表的Blob字段里,服务器再把保存在Blob字段中的图片文件展现给用户.通过网上查找发现很少有关于此类的文章,现在整理起来供大家参考. 1 在client端直接生成word文档 在jsp页面上生成word文档非常简单,只需把conte

  • 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

  • 基于Phantomjs生成PDF的实现方法

    本文实例讲述了基于Phantomjs生成PDF的实现方法.分享给大家供大家参考,具体如下: 最近在node.js项目开发中,遇见生成PDF的需求,当然生成PDF不是一个新意的需求:我可以选择利用开源的pdfkit或者其他node pdf模块,或者通过edge.js调用.net/python下的pdf库去做生成pdf.但是在我看来对于这些东西不管如何也需要花费我们太多的时间(pdf报表的内容报表很复杂),不如把所有的画图实现逻辑推向大家所熟悉的html+css来的简洁,快速,这样对于pdf格式变化

  • JavaScript代码生成PDF文件的方法

    如何使用js生成pdf文件呢?相信很多朋友都被这一问题迷惑着,下面由我们小编通过本文给大家简单介绍下. 可以使用javascript生成PDF的类库–jsPDF,先下载jsPDF-0.9.0rc2下载地址:;请点这里 ,以下是完整实例代码: <!doctype> <html> <head> <title>jsPDF</title> <meta http-equiv="Content-Type" content="

  • PHP实现在线阅读PDF文件的方法

    本文实例讲述了PHP实现在线阅读PDF文件的方法.分享给大家供大家参考.具体实现方法如下: <?php if(!function_exists('read_pdf')) { function read_pdf($file) { if(strtolower(substr(strrchr($file,'.'),1)) != 'pdf') { echo '文件格式不对.'; return; } if(!file_exists($file)) { echo '文件不存在'; return; } head

  • Python实现简单拆分PDF文件的方法

    本文实例讲述了Python实现简单拆分PDF文件的方法.分享给大家供大家参考.具体如下: 依赖pyPdf处理PDF文件 切分pdf文件 使用方法: 1)将要切分的文件放在input_dir目录下 2)在configure.txt文件中设置要切分的份数(如要切分4份,则设置part_num=4) 3)执行程序 4)切分后的文件保存在output_dir目录下 5)运行日志写在pp_log.txt中 P.S. 本程序可以批量切割多个pdf文件 from pyPdf import PdfFileWri

  • LINUX下PHP程序实现WORD文件转化为PDF文件的方法

    本文实例讲述了LINUX下PHP程序实现WORD文件转化为PDF文件的方法.分享给大家供大家参考,具体如下: <?php set_time_limit(0); function MakePropertyValue($name,$value,$osm){ $oStruct = $osm->Bridge_GetStruct("com.sun.star.beans.PropertyValue"); $oStruct->Name = $name; $oStruct->V

  • C#实现TIF图像转PDF文件的方法

    本文实例讲述了C#实现TIF图像转PDF文件的方法.分享给大家供大家参考.具体实现方法如下: 这里介绍使用TIFtoPDF的用法.该工具可以将多个TIF图像文件合并成一个PDF文件 TIFtoPDF.rar文件点击此处本站下载. Program.cs文件如下: using System; using System.Collections.Generic; using System.IO; using iTextSharp.text; using iTextSharp.text.pdf; usi

  • Python生成pdf文件的方法

    本文实例演示了Python生成pdf文件的方法,是比较实用的功能,主要包含2个文件.具体实现方法如下: pdf.py文件如下: #!/usr/bin/python from reportlab.pdfgen import canvas def hello(): c = canvas.Canvas("helloworld.pdf") c.drawString(100,100,"Hello,World") c.showPage() c.save() hello() di

  • Python2.7读取PDF文件的方法示例

    本文实例讲述了Python2.7读取PDF文件的方法.分享给大家供大家参考,具体如下: 这篇文章示例代码采用的Python版本是2.7,需要下载的插件是PDFMiner,下载地址是http://www.unixuser.org/~euske/python/pdfminer/,地址里有安装方法,我就不再细说了,需要说明的是Python2只能使用PDFMiner,Python3不能使用,Python3可以使用PDFMiner3K,下载地址为https://pypi.python.org/pypi/p

  • Python结合ImageMagick实现多张图片合并为一个pdf文件的方法

    Python结合ImageMagick实现多张图片合并为一个pdf文件的方法

    本文实例讲述了Python结合ImageMagick实现多张图片合并为一个pdf文件的方法.分享给大家供大家参考,具体如下: 前段时间买了不少书,现在手头的书籍积累的越来越多,北京这边租住的小屋子空间越来越满了.自从习惯了笔记本触摸板的手势操作之后,我偶觉得使用电脑看电子文档也挺享受的.于是想把自己的部分书籍使用手机拍照,然后合并成一个pdf文件. 最初尝试过找成熟的Windows软件,但是始终没有找到一个好用的软件.想写脚本处理,一直也没有实现.偶然查看ImageMagick软件的说明,找到了

  • Python实现合并同一个文件夹下所有PDF文件的方法示例

    Python实现合并同一个文件夹下所有PDF文件的方法示例

    本文实例讲述了Python实现合并同一个文件夹下所有PDF文件的方法.分享给大家供大家参考,具体如下: 一.需求说明 下载了网易云课堂的吴恩达免费的深度学习的pdf文档,但是每一节是一个pdf,我把这些PDF文档放在一个文件夹下,希望合并成一个PDF文件.于是写了一个python程序,很好的解决了这个问题. 二.数据形式 三.合并效果 四.python代码实现 # -*- coding:utf-8*- import sys reload(sys) sys.setdefaultencoding('

  • php实现生成PDF文件的方法示例【基于FPDF类库】

    本文实例讲述了php实现生成PDF文件的方法.分享给大家供大家参考,具体如下: 首先要下载FPDF http://www.fpdf.org/ 或者点击此处本站下载. 例子:将下面的文件保存在web根目录,与附件fpdf17处于同一级 <?php ini_set('display_errors', '0'); ini_set('max_execution_time', '60'); require ('fpdf17/chinese.php'); $pdf = new PDF_Chinese();

随机推荐