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