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>

以上內(nèi)容給大家介紹了JavaScript代碼生成PDF文件的方法，希望對大家有所幫助！

您可能感興趣的文章:

原生JS實現(xiàn)懸停下拉菜單
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)懸停下拉菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
JS實現(xiàn)多物體緩沖運動實例代碼
這篇文章主要介紹了JS實現(xiàn)多物體緩沖運動實例代碼，有需要的朋友可以參考一下
2013-11-11
Bootstrap 3瀏覽器兼容性問題及解決方案
這篇文章主要為大家詳細介紹了 Bootstrap 3 瀏覽器兼容性問題及其對應的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
javascript 通過封裝div方式彈出div窗體
廢話少說，此js對象是通過封裝頁面上的div，將其彈出，可以彈出多個，參考了一些高人代碼，達到我要的效果。先看看效果圖。配合一css就可以很好看了。
2009-10-10
javascript getElementByTagName的使用
javascript getElementByTagName當鼠標放上去時將超鏈接的顏色設為藍色的。
2009-06-06
如何檢測JavaScript的各種類型
在寫js腳本的時候我們必須對一件事保持警惕，就是避免異常的發(fā)生。在本篇文章里面，我想談談一部分類型檢測，有需要的可以參考學習。
2016-07-07
JavaScript實現(xiàn)點擊切換驗證碼及校驗
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊切換驗證碼及校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
基于JavaScript實現(xiàn)Tab選項卡切換效果
這篇文章主要介紹了基于JavaScript實現(xiàn)Tabs選項卡切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
JavaScript類型檢測的方法實例教程
這篇文章主要給大家介紹了關于JavaScript類型檢測的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
Openlayers+EasyUI Tree動態(tài)實現(xiàn)圖層控制
這篇文章主要為大家詳細介紹了Openlayers+EasyUI Tree動態(tài)實現(xiàn)圖層控制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09