htmljspdf_基於jquery與html5 canvas生成pdf插件jspdf為什麼導出頁面內容不全

『壹』如何將 HTML 頁面的一部分轉成 pdf

1、用瀏覽器轉換

這個方法是最簡單、高效的，安裝了360瀏覽器或者火狐及Chrome谷歌瀏覽器就可以輕松實現。以360瀏覽器為例，在瀏覽器的右上角點擊「文件」按鈕，如下圖：

『貳』 JS實現的將html轉為pdf功能【基於瀏覽器端插件jsPDF】

本文實例講述了JS實現的將html轉為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://www.jb51.net/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>
運行效果：
更多關於JavaScript相關內容可查看本站專題：《JavaScript擴展技巧總結》、《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找演算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:jsPDF導出pdf示例jsPDF生成pdf後在網頁展示實例使用jspdf生成pdf報表phonegap教程使用jspdf庫在應用中生成pdf文件(pdf生成方法)JS導出PDF插件的方法(支持中文、圖片使用路徑)js插件方式打開pdf文件(瀏覽器pdf插件分享)用Javascript檢查Adobe
PDF插件是否安裝的實現代碼純js實現html轉pdf的簡單實例(推薦)基於Phantomjs生成PDF的實現方法JavaScript+Java實現HTML頁面轉為PDF文件保存的方法JavaScript代碼生成PDF文件的方法

『叄』 jsPDF 將html代碼中的table導出為pdf文件怎麼弄

jsPDF 將html代碼中的table導出為pdf文件怎麼弄
有如下方法：
1、如果你電腦上安裝了office2007/2010，其中的word或EXCEL可以直接保存為PDF格式。
2、如果你電腦上安裝安裝的是office2003，可以下載安裝adobe acrobat，acrobat可以在載入生成PDF的插件。
3、利用任意一款PDF列印機（如pdffactory pro），然後將word文件「列印」成PDF文件。

『肆』前端HTML頁面轉PDF（html2canvas+jspdf）

utils - htmlToPdf.js

main.js

1、如果在多個頁面使用，給函數定義一個參數，參數為要導出頁面部分的id。

將 '#pdfDom' 替換為參數即可
2、將導出文件的名稱也作為參數傳入函數

此種方式也可用於vue，嘗試後可行，需要調節部分參數，但畢竟不太合適。
jQuery不需要調節。

https://github.com/zhangshaoliang/downLoadPDF

vue方式
jQuery方式

目前項目使用的是前端加後端方式，前端提供模板，echarts圖表的話需要轉為base64發送給後台。後台使用iText。目前存在的問題是後台不支持css3語法，只支持到css2，所以復雜的樣式頁面顯示錯亂，考慮個別頁面使用純前端實現。

網站導航

『伍』 vue中實現html頁面導出word和pdf的辦法

1.使用預先寫好的與html相似的word文檔模板，將用戶輸入的數據與讀取出來的模板結合生成指定名稱的docx文件
vue+elementUI導出數據為word文檔
2.使用Jquery插件和file-save來生成word文檔
vue 前端導出word、excel、pdf

1.使用html2canvas和JsPDF來生成pdf文件
html2canvas生成截圖後，用JsPDF轉為pdf文件
上面有，這是運用插件截圖可能會產生的問題的解決方案
2.調用瀏覽器的列印方法生成pdf文件
vue 項目導出pdf兩種方式

『陸』基於jquery與html5 canvas生成pdf插件jspdf為什麼導出頁面內容不全

H5e教育HTML5開發解答
JScript codevar canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");

document.write('<img src="'+img+'"/>');
列印是瀏覽器的事。用JS調用也是調用瀏覽器的功能，這種情況直接按CTRL+P去處理。
至於PDF，裝軟體，只要能列印的都可以通過軟體生成PDF。
若想在HTML5里用純代碼實現導出PDF是實現不了的。

『柒』如何在網頁中顯示PDF文件

使用js插件
其中實現閱讀pdf文件的js插件很多，比如：pdf.js：是一個技術原型主要用於在 HTML5 平台上展示 PDF 文檔，無需任何本地技術支持；jsPDF：是一個使用Javascript語言生成PDF的開源庫

這個 PDFObject.js，是一個 JavaScript 庫用來在HTML中動態嵌入 PDF 文檔。
js代碼：
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed();
};
</script>

OK,這樣就可以了。只要把地址寫對即可。
若我在某一個div中載入pdf咋辦呢？看官網，發現embed()方法可以有參數的，無參數是指body，有參數是具體的某一個位置。
<script type="text/javascript">
window.onload = function (){
var success = new PDFObject({ url: "sample.pdf" }).embed(「div的id」);
};
</script>

當然,其中還可以進一步設置參數,比如你想以多少秒的速度預覽,有css,無css等
具體的官網如下：http$://$www.$pdfobject$.com/
請去掉$這個符號

導航:首頁 > 文檔加密 > htmljspdf

htmljspdf

與htmljspdf相關的資料