Ⅰ 《html轉pdf-----wkhtmltopdf踩坑總結》
最近公司給了個任務，差不多的流程就是接受json數據，然後最後生成圖片。我想的辦法是根據json數據生成html然後轉成pdf。使用的語言是python。然後具體來說使用的工具就是使用python名為pdfkit的庫去調用基於webkit的wkhtmltopdf。
目前來說html轉pdf最主流的程序就是wkhtmltopdf，但是坑還是挺多的而且網上資源不是很豐富，所以寫一篇踩坑總結。
##1. 無法讀取本地文件
顯示在html上好好的本地圖片，到了pdf上就讀取不出來，但是來源於網路（給一個url）的圖片卻能完美讀出來。
後來發現，原來在上一個版本0.12.5是可以讀取的，到了0.12.6不能讀取了是因為其中的一個參數--enable-local-file-access變為了非默認。在python中改這個參數的方法是
然後再在後續調用wkhtmltopdf中載入這個option（我一開始想的是把value改成True，結果一直報錯，吐了）
##2. 無法解析latex格式的公式
在html使用了MathJax提供的js去解析latex格式的數學公式，在html界面可以完美顯示，但是到了pdf中就解析不了，然後我以為是沒有添加'enable-javascript'的問題。結果加上之後還是不行。然後我發現又有一個參數叫做'no-stop-slow-scripts'的參數，可以等到js運行完畢之後再進行pdf的轉化。結果還是不行。
然後我就在想會不會js在運行的時候出了什麼問題，加上了'debug-javascripts'的參數。果然發現在調用MathJax提供的鏈接的時候發現這個鏈接已經過期了（我也不知道為啥過期了在html界面還能完美展示。。。），把js里的鏈接換成了
https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
完美解決
##3. 部分css失效
css3中的flex全部失效，所以大家得換一下！
當時遇到了一個講的很好的博客，給大家分享一下，然後再放一個官方文檔的鏈接
博客：https://www.jianshu.com/p/4d65857ffe5e
官方文檔：https://wkhtmltopdf.org/usage/wkhtmltopdf.txt
Ⅱ 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兩種方式
Ⅲ 前端html頁面轉成pdf格式並下載
目的： 前端將頁面導出為pdf格式，主要用到 html2canvas 、 jspdf 兩個插件，其實 html2canvas 這個插件就相當於將屏幕『截』了一張圖，當然也並不是真正的截圖，通過遍歷dom生成，所以其實就是張圖片，雖然方法好用方便，但是也有一定的缺陷，那就是導出的pdf無法復制裡面的內容。
react
Ⅳ 前端html數據生成pdf,要給後端傳什麼路徑
前端通過傳遞給後端html_url，由後端伺服器獲取html文件進行渲染，生成pdf，然後將pdf上傳雲上伺服器。根據發布的相關信息查詢到，雲上伺服器存儲html，前端通過傳遞給後端html_url，由後端伺服器獲取html文件進行渲染，生成pdf，然後將pdf上傳雲上伺服器。選擇pyppeteer，有如下依據，python官方庫如xhtml2pdf只能處理類似富文本類的靜態頁面，而html需要js渲染，故藉助瀏覽器是一種可行的實現方式，tornado是非同步框架，pyppeteer是非同步庫匹配。
Ⅳ 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文件的方法
Ⅵ js將網頁導出成pdf（js 列印指定div內容）2020-09-02
<input type="button" id="button" value="點擊列印"/>
<div id="div_print">
<p>列印此處內容</p>
</div>
<script type="text/javascript">
function printdiv(printpage){
var newstr=document.getElementById(printpage).innerHTML;
var oldstr=document.body.innerHTML;
document.body.innerHTML=newstr;
window.print();
document.body.innerHTML=oldstr;
return false;
}
window.onload=function(){
var bt=document.getElementById("button");
bt.onclick=function(){printdiv('div_print');}
}
</script>
html, body{
overflow:visible;
}
列印時另存為pdf模式列印後的內容可復制 默認為Microsoft Print to PDF 模式
Ⅶ js 如何把html轉成PDF
把html轉成PDF：
1.下載HTML2FPDF開源軟體，將其放在你的網站根目錄文件夾下，比如 /srv/httpd/htdocs/test/；
2.新建1.php文件,1.php中的代碼如下：
<?php
require('html2fpdf.php');
$pdf=new HTML2FPDF();
$pdf->AddPage();
// yourfile.html 你要轉化的HTML文件
$yourfile_html = "yourfile.html"
// yourfile.pdf 轉化成功後的pdf文件名
$yourfile_pdf = "yourfile.pdf"
$fp = fopen($yourfile_html,"r");
$strContent = fread($fp, filesize($yourfile_html));
fclose($fp);
$pdf->WriteHTML($strContent);
$pdf->Output($yourfile_pdf );
echo "PDF 文件成功生成!";
3.將你要轉化的yourfile.html文件也放在test目錄下，隨後在瀏覽器中訪問1.php文件就可以把html文件轉化成PDF文件了，
注意事項：1.php，yourfile.html和html2fpdf.php都要在同一目錄下
Ⅷ 前端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，所以復雜的樣式頁面顯示錯亂，考慮個別頁面使用純前端實現。
網站導航
Ⅸ 前端生成pdf，jspdf+html2Canvas的使用(vue)
2、安裝html2Canvas: npm install --save html2canvas
這里使用 iframe 嵌套需要轉成pdf的html文件；
如果pdf內容是動態的，可以將html丟給後端，讓後端使用freemarker ftl模板語言或是啥其他的模板語言更改即可，然後將整個html作為字元串傳給前端，前端再使用iframe 的 srcdoc屬性將內容渲染出來。
不存在分頁內容裂開的情況，但對樣式呈現不太友好，有時會出現內容偏移情況，時好時壞的，經過不斷的嘗試，發生偏移的時候，可以將html2Canvas的width寫死，但是值具體是多少，需要你自己猜
分頁會出現問題：比如圖片裂開，表格的某一行從中間斷開了等等....我用的笨方法手動去調整iframe的寬、高+html2Canvas的width、height+contentWidth、contentHeight，一點點試出來合適的值（應該有更好的方法，但是技術有限）
1. 生成多頁pdf，分頁內容裂開的問題