2015-06-04 4 views
7

Próbuję przekonwertować plik div na plik PDF.Konwersja pliku HTML Div do pliku PDF za pomocą Jquery

to jest mój kod HTML:

mogę pobrać go dobrze, ale chcę pokazać w pliku PDF pływak Gr: lewa pokrywa się z Div float: prawo.

<script lang="javascript" type="text/javascript"> 
 

 

 
function run() 
 
{ 
 
    var pdf = new jsPDF('p', 'pt', 'letter'), 
 
    source = $('#content')[0], 
 
    margins = { 
 
     top: 40, 
 
     bottom: 40, 
 
     left: 40, 
 
     right: 40, 
 
     width: 522 
 
    }; 
 

 
pdf.fromHTML(
 
     source, 
 
     margins.left, 
 
     margins.top, 
 
     { 
 
     'width': margins.width 
 
     }, 
 
     function (dispose) { 
 
      pdf.save('Test.pdf'); 
 
     }, 
 
     margins 
 
    ); 
 
}; 
 

 

 
</script type = "text/javascript">
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>html2pdf</title> 
 
<body> 
 

 
<div id="content" style = "width: 100px"> 
 
     
 
      <div id = "name" style="float:right"> 
 
\t \t \t \t <div id ="rey"> Rey </div> 
 
\t \t \t \t <div id ="norbert"> norbert </div> 
 
\t \t \t </div> 
 
\t \t \t <div id = "age" style="float:left; width:50px">age</div> 
 

 
</div> 
 

 
<div id = "button" style ="margin-top:50px"> 
 
<button id="cmd" onclick ="run()">generate PDF</button> 
 
</div> 
 
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script> 
 
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script> 
 

 
</body> 
 
</html>

Teraz to pokazać div lewej w pierwszym rzędzie, a prawo Div w następnym wierszu. Prosimy o pomoc.

+0

Dopóki wiem jspdf nie obsługuje wszelkiego rodzaju css. Musiałem zrezygnować z mojego obecnego projektu z tego powodu i powrócić do generowania PDF po stronie serwera. –

+0

możliwy duplikat [Eksportowanie pliku PDF z jspdf bez renderowania CSS] (http://stackoverflow.com/questions/25946275/exporting-pdf-with-jspdf-not-rendering-css) –

+0

Dodaliśmy wsparcie dla elementów pływających w css -to-pdf pokazane tutaj. Występują pewne problemy z utrzymywanymi wysokościami kontenerów, które należałoby naprawić, ale ten przykład pokazuje pływaki, css i PDF ... http://www.cloudformatter.com/CSS2Pdf.Demos.Float –

Odpowiedz

0

jak stwierdziłem w komentarzach jspdf nie obsługuje css, jak jest.

Ale znalazłem to post, które ma odnośnik do wtyczki HtmlToCnavas, która może pomóc.

0

Wiem, że javascript nie może wygenerować pełnego HTML strony z css do PDF.

Jeśli twój projekt napisany przez PHP w back-end, dompdf pomoże.

Uwaga: Płyn CSS nie jest obsługiwany (ale jest w użyciu).

0

<script lang="javascript" type="text/javascript"> 
 

 

 
function run() 
 
{ 
 
    var pdf = new jsPDF('p', 'pt', 'letter'), 
 
    source = $('#content')[0], 
 
    margins = { 
 
     top: 40, 
 
     bottom: 40, 
 
     left: 40, 
 
     right: 40, 
 
     width: 522 
 
    }; 
 

 
pdf.fromHTML(
 
     source, 
 
     margins.left, 
 
     margins.top, 
 
     { 
 
     'width': margins.width 
 
     }, 
 
     function (dispose) { 
 
      pdf.save('Test.pdf'); 
 
     }, 
 
     margins 
 
    ); 
 
}; 
 

 

 
</script type = "text/javascript">
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>html2pdf</title> 
 
<body> 
 

 
<div id="content" style = "width: 100px"> 
 
     
 
      <div id = "name" style="float:right"> 
 
\t \t \t \t <div id ="rey"> Rey </div> 
 
\t \t \t \t <div id ="norbert"> norbert </div> 
 
\t \t \t </div> 
 
\t \t \t <div id = "age" style="float:left; width:50px">age</div> 
 

 
</div> 
 

 
<div id = "button" style ="margin-top:50px"> 
 
<button id="cmd" onclick ="run()">generate PDF</button> 
 
</div> 
 
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script> 
 
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script> 
 

 
</body> 
 
</html>

+1

Edytuj i podaj więcej informacji. Tylko kod i odpowiedź "spróbuj tego" są odradzane, ponieważ nie zawierają treści do wyszukiwania i nie wyjaśniają, dlaczego ktoś powinien "spróbować tego". Staramy się być źródłem wiedzy. –