JS實現(xiàn)的將html轉(zhuǎn)為pdf功能【基于瀏覽器端插件jsPDF】
更新時間：2018年02月06日 11:43:02 作者：Maloon
這篇文章主要介紹了JS實現(xiàn)的將html轉(zhuǎn)為pdf功能,結(jié)合完整實例形式分析了基于瀏覽器端插件jsPDF實現(xiàn)的HTML格式數(shù)據(jù)轉(zhuǎn)換成pdf具體操作技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)的將html轉(zhuǎn)為pdf功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<title>jsPDF插件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
</head>
<body>
<p class="pdf-wrapper" ="to-pdf">HTML content...<h1>中文</h1>
中國,漢字,測試:合同 模版 中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國</br>中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國....................<br/>
中國,漢字,測試:合同 模版 ...................<br/>
計費 接口 ....................<br/>
<img src='http://chabaoo.cn/images/logo.gif'/>
</p>
<script type="text/javascript">
var pdf = new jsPDF('p','pt','a4');
pdf.internal.scaleFactor = 1;
var options = {
pagesplit: true
};
//$('.pdf-wrapper')
pdf.addHTML(document.body,options,function() {
pdf.save('web1111.pdf');
});
</script>
</body>
</html>
運行效果：
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript擴展技巧總結(jié)》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript設(shè)計模型Iterator實例解析
這篇文章主要介紹了JavaScript設(shè)計模型Iterator實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
深度剖析JavaScript作用域從局部到全局一網(wǎng)打盡
這篇文章主要為大家介紹了JavaScript作用域的深度剖析，從局部到全局一網(wǎng)打盡，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
JS簡單實現(xiàn)DIV相對于瀏覽器固定位置不變的方法
這篇文章主要介紹了JS簡單實現(xiàn)DIV相對于瀏覽器固定位置不變的方法,涉及javascript針對頁面位置的運算與動態(tài)變換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要給大家介紹了關(guān)于Js利用正則表達(dá)式去除字符串的中括號的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JavaScript如何調(diào)用C++模塊中的函數(shù)
這篇文章主要給大家介紹了關(guān)于JavaScript如何調(diào)用C++模塊中函數(shù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
微信小程序?qū)崿F(xiàn)頁面導(dǎo)航的方法詳解
這篇文章主要為大家詳細(xì)介紹一下微信小程序?qū)崿F(xiàn)頁面導(dǎo)航的幾種方法以及幫助大家掌握如何使用頁面之間的導(dǎo)航跳轉(zhuǎn)，感興趣的可以了解一下2022-07-07
一門編程語言的核心是數(shù)據(jù)結(jié)構(gòu)，粗略來講，可以把數(shù)據(jù)結(jié)構(gòu)分成不可變類型（immutable）和可變類型（mutable）。2010-04-04
這篇文章主要介紹了javascript比較兩個日期的先后示例代碼，非常的不錯，這里推薦給有相同需求的小伙伴。2014-12-12
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項目的可靠性?，F(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
這篇文章主要介紹了js代碼規(guī)范之Eslint安裝與配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09