JavaScript代码生成PDF文件的方法
更新时间:2016年02月26日 11:09:18 投稿:mrr
如何使用js生成pdf文件呢,下面通过本文给大家分享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文件的方法,希望对大家有所帮助!
相关文章
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
首先来说,让一个游戏赋有可玩性必须要动静结合,我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片,感兴趣的朋友可以了解下,便当巩固js知识了2013-01-01javascript基础知识大全 便于大家学习,也便于我自己查看
发些javascript基础知识,便于大家学习,也便于我自己查看2012-08-08JavaScript+html5 canvas绘制渐变区域完整实例
这篇文章主要介绍了JavaScript+html5 canvas绘制渐变区域的方法,结合完整实例形式分析了canvas颜色调用与图形绘制的相关技巧,需要的朋友可以参考下2016-01-01Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
今天小编就为大家分享一篇Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论