JavaScript代碼生成PDF文件的方法
如何使用js生成pdf文件呢?相信很多朋友都被這一問題迷惑著,下面由腳本之家小編通過本文給大家簡單介紹下。
可以使用javascript生成PDF的類庫–jsPDF,先下載jsPDF-0.9.0rc2下載地址:;請點(diǎn)這里 ,以下是完整實(shí)例代碼:
<!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文件的方法,希望對大家有所幫助!
- jsPDF導(dǎo)出pdf示例
- jsPDF生成pdf后在網(wǎng)頁展示實(shí)例
- 使用jspdf生成pdf報(bào)表
- phonegap教程使用jspdf庫在應(yīng)用中生成pdf文件(pdf生成方法)
- JS導(dǎo)出PDF插件的方法(支持中文、圖片使用路徑)
- js插件方式打開pdf文件(瀏覽器pdf插件分享)
- 用Javascript檢查Adobe PDF插件是否安裝的實(shí)現(xiàn)代碼
- 純js實(shí)現(xiàn)html轉(zhuǎn)pdf的簡單實(shí)例(推薦)
- 基于Phantomjs生成PDF的實(shí)現(xiàn)方法
- JavaScript+Java實(shí)現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法
- JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能【基于瀏覽器端插件jsPDF】
相關(guān)文章
JS實(shí)現(xiàn)多物體緩沖運(yùn)動實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)多物體緩沖運(yùn)動實(shí)例代碼,有需要的朋友可以參考一下2013-11-11
javascript getElementByTagName的使用
javascript getElementByTagName當(dāng)鼠標(biāo)放上去時(shí)將超鏈接的顏色設(shè)為藍(lán)色的。2009-06-06
JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊切換驗(yàn)證碼及校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
基于JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)Tabs選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
Openlayers+EasyUI Tree動態(tài)實(shí)現(xiàn)圖層控制
這篇文章主要為大家詳細(xì)介紹了Openlayers+EasyUI Tree動態(tài)實(shí)現(xiàn)圖層控制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09

