web-dev-qa-db-fra.com

Comment générer un pdf à partir d'une page web html?

Je recherche une bibliothèque pour transformer ma page Web en un fichier PDF après un clic sur un bouton. J'essaie jspdf, mais il s'imprime sans CSS, comment puis-je faire cela en utilisant JavaScript/jQuery et garder mon CSS? Ou un autre CSS que je peux choisir?

javascriptjqueryhtml5pdfcss-to-pdf
22
Alejandro Hinestrosa

Il existe une nouvelle solution cloud jQuery + qui rendra n'importe quelle page HTML et son CSS (y compris les règles des médias imprimés) au format PDF. La solution est configurée pour imprimer n'importe quelle région de votre page Web, vous dites simplement au formateur quel élément de conteneur vous souhaitez imprimer et la bibliothèque fait le reste. Ce que vous obtenez en retour est un PDF ou le backend repoussera un PDF PDF à télécharger).

Voici votre bibliothèque (GitHub):
https://github.com/Xportability/css-to-pdf

Voici votre violon:
http://jsfiddle.net/kstubs/jrtM5/

Voici une démo qui fonctionne:
http://xep.cloudformatter.com/doc/

Actuellement, il n'y a pas d'instructions d'utilisation, mais suivre les exemples (voir la source) devrait être assez explicite (recherchez les boutons Imprimer) et voici plus ou moins les options/paramètres supplémentaires que la méthode Format comprend.

options 
{
    pageWidth: "8.5in",             
    pageHeight: "11in", 
    pageMargin: ".25in", 
    pageMarginTop: "1in",
    pageMarginRight: "1in",
    pageMarginBottom: "1in",
    pageMarginLeft: "1in",
    render: ("none"|"newwin<default>"|embed"|"download<default IE>"),
    foStyle: { 
        // puts fo style attributes on the root, ex. fontSize:14px
        foStyleName: 'value', ...
    }           
}

Voici la liste des attributs CSS actuellement pris en charge.

[
    'lineHeight', 
    'alignmentBaseline', 
    'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundColor',
    'baselineShift', 
    'border',
    'borderWidth', 'borderColor','borderStyle',
    'borderTop','borderLeft','borderRight','borderBotttom',
    'borderTopWidth','borderTopStyle','borderTopColor', 
    'borderBottomWidth','borderBottomStyle','borderBottomColor',
    'borderLeftWidth','borderLeftStyle','borderLeftColor',
    'borderRightWidth','borderRightStyle','borderRightColor',
    'borderCollapse',             
    'clear', 'color', 
    'display', 'direction', 'dominantBaseline', 
    'fill', 'float', 
    'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'fontFamily', 
    'listStyleType', 'listStyleImage', 'letterSpacing', 
    'marginTop', 'marginBottom', 'marginLeft', 'marginRight','orphans', 
    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
    'pageBreakAfter', 'pageBreakBefore', 
    'tableLayout', 
    'textAlign', 'textAnchor','textDecoration', 'textIndent', 'textTransform', 
    'verticalAlign',
    'widows', 'wordSpacing', 'width'
]

J'espère que cela t'aides!

11
kstubs

essayez ce package npm htmlto. Il crée PDF à partir de html avec un style CSS

var htmlTo = require('htmlto')

htmlTo.pdf('./public/html/report.html','./public/pdf/report.pdf',{width: 2480, height: 3508})

installer:

npm install -S htmlto

npm install -S phantom

* vous pouvez également spécifier la version dimensions.phantom ^ 4.0.3 et la version noeud v6.5.0 https://www.npmjs.com/package/htmlto

1
dev07

J'ai créé une API simple et très facile à utiliser qui utilise la bibliothèque snappy , basée sur la CLI basée sur le webkit wkhtmltopdf , afin de convertir une page HTML à partir de l'URL au format PDF. Voici le dépôt Github: https://github.com/Dellos7/dhtml2pdf

Ceci est un exemple de la façon de l'utiliser à partir d'une balise d'ancrage. Cela montrera le PDF du site https://www.github.com Généré dans un nouvel onglet de navigateur:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=show" target="_blank">Show PDF</a>

Exemple d'utilisation pour télécharger le PDF:

<a href="https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download&file_name=my_pdf">Download PDF</a>

Avec cette solution, vous n'avez même pas besoin d'utiliser javascript pour générer votre PDF.

Mais si vous devez toujours le faire en utilisant javascript, vous pouvez le faire comme ceci:

document.getElementById("your-button-id").addEventListener("click", function() {
    var link = document.createElement('a');
    link.href = 'https://dhtml2pdf.herokuapp.com/api.php?url=https://www.github.com&result_type=download';
    link.download = 'file.pdf';
    link.dispatchEvent(new MouseEvent('click'));
});

Dans le dépôt, j'explique également comment cloner et déployer très facilement votre propre API dans Herok afin que vous puissiez maintenir l'API vous-même et ne pas dépendre de services externes.

1
David López