JavaScript代碼生成PDF文件的方法
如何使用js生成pdf文件呢?相信很多朋友都被這一問(wèn)題迷惑著,下面由腳本之家小編通過(guò)本文給大家簡(jiǎn)單介紹下。
可以使用javascript生成PDF的類(lèi)庫(kù)–jsPDF,先下載jsPDF-0.9.0rc2下載地址:;請(qǐng)點(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文件的方法,希望對(duì)大家有所幫助!
- jsPDF導(dǎo)出pdf示例
- jsPDF生成pdf后在網(wǎng)頁(yè)展示實(shí)例
- 使用jspdf生成pdf報(bào)表
- phonegap教程使用jspdf庫(kù)在應(yīng)用中生成pdf文件(pdf生成方法)
- JS導(dǎo)出PDF插件的方法(支持中文、圖片使用路徑)
- js插件方式打開(kāi)pdf文件(瀏覽器pdf插件分享)
- 用Javascript檢查Adobe PDF插件是否安裝的實(shí)現(xiàn)代碼
- 純js實(shí)現(xiàn)html轉(zhuǎn)pdf的簡(jiǎn)單實(shí)例(推薦)
- 基于Phantomjs生成PDF的實(shí)現(xiàn)方法
- JavaScript+Java實(shí)現(xiàn)HTML頁(yè)面轉(zhuǎn)為PDF文件保存的方法
- JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能【基于瀏覽器端插件jsPDF】
相關(guān)文章
Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單
Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單,主要應(yīng)用場(chǎng)合有省市級(jí)關(guān)聯(lián)菜單等,感興趣的小伙伴們可以參考一下2016-03-03VsCode插件自動(dòng)生成注釋插件koroFileHeader使用教程
這篇文章主要介紹了VsCode插件自動(dòng)生成注釋插件koroFileHeader使用教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01Swiper 4.x 使用方法(移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng))
Swiper是純javascript打造的滑動(dòng)特效插件,面向手機(jī)、平板電腦等移動(dòng)終端,這里為大家簡(jiǎn)單介紹一下Swiper4的用法,需要的朋友可以參考下2018-05-05微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01JavaScript給事件委托批量添加事件監(jiān)聽(tīng)詳細(xì)流程
事件委托,一般來(lái)講,會(huì)把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上,真正綁定事件的是外層元素,當(dāng)事件響應(yīng)到需要綁定的元素上時(shí),會(huì)通過(guò)事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上,然后在外層元素上去執(zhí)行函數(shù)2021-10-10Js實(shí)現(xiàn)滾動(dòng)變色的文字效果
滾動(dòng)變色的文字js特效,可看到文字在交替變色顯示,以吸引人的注意,效果真心不錯(cuò)哦,需要的朋友可以參考下2014-06-06