Est-il possible de sauvegarder une page HTML en tant que PDF en utilisant JavaScript ou jquery?
Est-il possible de sauvegarder une page HTML en tant que PDF en utilisant JavaScript ou jquery?
En détail:
J'ai généré une page HTML contenant un tableau. Il comporte un bouton "enregistrer en PDF". Si l'utilisateur clique sur ce bouton, cette page HTML doit être convertie en fichier PDF.
Est-il possible d'utiliser JavaScript ou jquery?
Oui , utilisez jspdf Pour créer un fichier pdf.
Vous pouvez ensuite le transformer en un URI de données et injecter un lien de téléchargement dans le DOM.
Vous devrez cependant écrire vous-même la conversion HTML en pdf.
Utilisez simplement des versions imprimables de votre page et laissez l’utilisateur choisir son mode d’impression.
Edit: Apparemment, son support est minimal
Donc, la réponse est d'écrire votre propre PDF écrivain ou d'obtenir un PDF écrivain existant) pour le faire pour vous (sur le serveur).
Ya c'est très facile à faire avec javascript. J'espère que ce code vous sera utile.
Vous aurez besoin de bibliothèque JSpdf .
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
// This code is collected but useful, click below to jsfiddle link.
</script>
Voici comment je le ferais, c’est une idée, pas un design pare-balles, vous devez le modifier.
- L'utilisateur clique sur le bouton Enregistrer sous PDF
- Le serveur reçoit un appel via ajax
- Le serveur répond avec une URL pour PDF généré à l'aide de HTML, j'ai utilisé Apache FOP avec beaucoup de succès
- Le js qui gère la réponse ajax fait un location.href pour pointer l'URL envoyée par JS et dès le chargement de cette URL, il envoie le fichier en utilisant l'en-tête de disposition du contenu en tant que pièce jointe, obligeant ainsi l'utilisateur à télécharger le fichier.
Vous pouvez utiliser Phantomjs. Téléchargez ici et utilisez l’exemple suivant pour tester la fonction de conversion html-> pdf https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js =
Exemple de code:
phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf
J'ai utilisé jsPDF et dom-to-image bibliothèque pour exporter du HTML au PDF.
Je poste ici comme référence à qui concerne.
$('#downloadPDF').click(function () {
domtoimage.toPng(document.getElementById('content2'))
.then(function (blob) {
var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
pdf.save("test.pdf");
});
});
Cela peut être une réponse tardive, mais c’est la meilleure solution: https://github.com/eKoopmans/html2pdf
Mise en œuvre javascript pure. Vous permet de spécifier un seul élément par ID et de le convertir.
En bref: non. Le premier problème est l'accès au système de fichiers, qui dans la plupart des navigateurs est défini sur no par défaut pour des raisons de sécurité. Les navigateurs modernes prennent parfois en charge le stockage minimaliste sous la forme d'une base de données. Vous pouvez également demander à l'utilisateur d'activer l'accès aux fichiers.
Si vous avez accès au système de fichiers, alors enregistrer en HTML n'est pas si difficile (voir l'objet file dans la documentation de JS) - mais PDF n'est pas si facile. PDF est un format de fichier assez avancé qui convient mal à Javascript. Vous devez écrire des informations dans des types de données non directement pris en charge par Javascript, tels que des mots et des quadruples. Vous devez également prédéfinir un système de recherche par dictionnaire qui doit être enregistré dans le fichier. Je suis sûr que quelqu'un pourrait le faire fonctionner, mais l'effort et le temps impliqués seraient mieux dépensés en apprentissage de C++ ou Delphi.
L'exportation HTML devrait cependant être possible si l'utilisateur vous donne un accès non restreint
$('#cmd2').click(function() {
var options = {
//'width': 800,
};
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($("#content2"), -1, 220, options, function() {
pdf.save('admit_card.pdf');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
<h2>Entrance Exam Hall Ticket</h2>
</div>
<div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
<div class="innerdiv" style="width: 80%;float: left;">
<div class="restDet">
<div class="div">
<div class="label" style="width: 30%;float: left;">
<strong>Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Santanu Patra</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>D.O.B.</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>17th April, 1995</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Address</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Contact Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>9874563210</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Email Id</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>[email protected]</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Parent(s) Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>S. Patra</span><br /><span>7896541230</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Exam Center</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Institute of Engineering & Management</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Hall Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>COM-32</span>
</div>
</div>
</div>
</div>
<div class="sideDiv" style="width: 20%;float: left;">
<div class="atts" style="float: left;width: 100%;">
<div class="photo" style="width: 115px;height: 150px;float: right;">
<img src="images/candidateImg.gif" style="width: 100%;"/>
</div>
<div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
<small>Self Attested</small>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-info" id="cmd2">Download Token</button>Oui. Par exemple, vous pouvez utiliser la solution par https://grabz.it .
Il possède une API Javascript qui peut être utilisée de différentes manières pour capturer et manipuler la capture d'écran. Pour l'utiliser dans votre application, vous devez d'abord obtenir un clé et secret de l'application et télécharger le SDK Javascript gratuit.
Voyons donc un exemple simple d'utilisation:
//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>
Ensuite, attendez simplement quelques instants et l’image apparaîtra automatiquement au bas de la page, sans que vous ayez besoin de recharger la page.
C'est le plus simple. Pour plus d’exemples avec la manipulation d’images, attacher des captures d’écran à des éléments, etc., consultez documentation .
Il existe un autre moyen très simple et évident de convertir du HTML en PDF en utilisant JavaScript: utilisez une API en ligne pour cela. Cela fonctionnera correctement si vous n'avez pas besoin de faire la conversion lorsque l'utilisateur est hors ligne.
FreeHtmlToPdf.com est une option qui a une API Nice. Je suis sûr que vous pouvez trouver des alternatives (comme PdfMage qui a évidemment sa propre API mais ne partage pas son protocole).
Pour l'API FreeHtmlToPdf, vous auriez quelque chose comme ceci:
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "http://freehtmltopdf.com");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "html");
hiddenField.setAttribute("value", "<html><body>Hi there!</body></html>");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "baseurl");
hiddenField.setAttribute("value", "http://localhost");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "convert");
hiddenField.setAttribute("value", "");
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
Il est beaucoup plus facile et fiable de convertir le code HTML en serveur côté pdf. Nous utilisons Google Puppeteer. Il est bien entretenu avec des wrappers pour n’importe quelle langue côté serveur de votre choix. Puppeteer utilise Headless Chrome pour générer des captures d'écran et/ou PDF fichiers. Cela vous épargnera BEAUCOUP de maux de tête, en particulier si vous devez générer un complexe PDF avec des tableaux, des images, des graphiques, plusieurs pages, etc.)