问题
I am using jsPDF API to export the data to the PDF when user click on export button. I am facing issues when the PDF is generated when there is a highlighted text, or there are no values in any of the table rows. The highlighted text color is not been shown in the generated PDF and if the table contains any blank values the table is not shown correctly in the generated PDF.
Please find the online demo https://plnkr.co/edit/GfXDGHWNHh2Mb89In7zK?p=preview
Demo :
var app = angular.module("app", []);
app.controller("myController", ["$scope",
function($scope) {
$scope.export = function() {
// var pdf = new jsPDF('landscape');
var pdf = new jsPDF('p','pt','a4');
var pdfName = 'test.pdf';
//var options = {pagesplit: true,'width': 550};
var options = {
pagesplit: true,'width': 500
};
var $divs = $('.myDivClass')
var totalDiv = $divs.length -1;
var currentRecursion=0;
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
pdf.save(pdfName);
}else{
currentRecursion++;
pdf.addPage();
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, totalDiv);
});
}
}
]);<!doctype html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.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.4/jspdf.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="split_text_to_size.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="myController">
<button ng-click="export()">Export</button>
<div class="myDivClass" style="background-color:white">
The identity of the longest word in English depends upon the definition of what constitutes a word in the English language, as well as how length should be compared. In addition to words derived naturally from the language's roots (without any known intentional invention), English allows new words to be formed by coinage and construction; place names may be considered words; technical terms may be arbitrarily long. Length may be understood in terms of orthography and number of written letters, or (less commonly)
<font color="red">This is red texttttt</font>
<p><span style='background-color: rgb(255, 255, 0);'>text hightlighted with yellow color</span></p><p><span style='background-color: rgb(255, 0, 0);'>asdjasdjasdsjadhjsahdjasdh
red color</span></p><p><span style='background-color: rgb(255, 0, 0);'><b>asdasdasdasdsaas -- bold and red colorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</b></span></p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p><span style="background-color: rgb(255, 255, 0);"><b>Below are the options with bullets</b></span></p><ul><li><span style="background-color: rgb(255, 255, 0);"><b>option1</b></span></li><li><span style="background-color: rgb(255, 255, 0);"><b>option2</b></span></li></ul><p><b style="background-color: rgb(231, 99, 99);">Below are options with numbers</b></p><ol><li><b style="background-color: rgb(231, 99, 99);">option1</b></li><li><b style="background-color: rgb(231, 99, 99);">option2</b></li></ol>
<p><br></p><table class="table table-bordered"><tbody><tr><td>133</td><td><br></td><td><br></td></tr><tr><td><br></td><td>666</td><td><br></td></tr></tbody></table><p><br></p>
</div></div>
</body>
</html>I am sure there should be some CSS/js hacks to resolve this issues. Any inputs are helpful.
回答1:
Well it is not the best solution , but you can convert your entire document into an image and then print the image in the page ,or you can use their new method addHTML but they don't generate a very good
Approach one :
$scope.export = function() {
// var pdf = new jsPDF('landscape');
var pdf = new jsPDF('p','pt','a4');
var pdfName = 'test.pdf';
//var options = {pagesplit: true,'width': 550};
var options = {
pagesplit: true,'width': 500
};
var $divs = $('.myDivClass')
var totalDiv = $divs.length -1;
var currentRecursion=0;
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
pdf.save(pdfName);
}else{
currentRecursion++;
pdf.addPage();
pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, totalDiv);
});
}
Approach 2 : where printDiv is the div in which you have to wrap your whole html content
var app = angular.module("app", []);
app.controller("myController", ["$scope",
function($scope) {
$scope.export = function() {
html2canvas(document.getElementById("printDiv"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
console.log('Report Image URL: ' + imgData);
var doc = new jsPDF('l', 'mm', [canvas.width, canvas.height]); //210mm wide and 297mm high
doc.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
doc.save('sample.pdf');
}
});
}
}
]);
来源：https://stackoverflow.com/questions/47311531/issue-to-show-highlighted-text-or-when-any-of-the-table-rows-are-blank