2 pièce(s) jointe(s)
Générer un pdf à partir d'une div bootstrap
Bonjour
Je voudrais générer un fichier pdf à partir d'une div utilisant bootstrap. J'ai pu trouver ce lien qui propose l'utilisation de la bibliothèque Print.js:
https://jsfiddle.net/crabbly/rj397t4v/
Voici donc ce que j'ai sur ma page html:
Pièce jointe 508538
Le problème est que quand je génère le pdf, la couleur verte du background ne s'affiche pas:
Pièce jointe 508545
On dirait que le style css de bootstrap n'est pas pris en compte.
Comment y remédier ?
Voici la page index.html:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
| <!DOCTYPE html>
<html lang="en">
<head>
<title>jsPDF</title>
<meta charset="utf-8">
<link rel="stylesheet" href="print/print.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' /><!-- bootstrap css -->
</head>
<body>
<div id="printElement">
<h1>Bootstrap Grid</h1>
<div class="row bg-success">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
</div>
<div>
<button class="btn btn-primary" id="printButton">
Print
</button>
</div>
<script type="application/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="application/javascript" src="print/print.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function print() {
printJS({
printable: 'printElement',
type: 'html',
targetStyles: ['*']
})
}
document.getElementById('printButton').addEventListener ("click", print)
</script>
</body>
</html> |
Voici le style.css:
Code:
1 2 3 4 5 6 7
| #printElement, #printButton {
margin: 30px;
}
.col-sm-4 {
padding: 10px;
border: 1px solid grey;
} |
Merci