显示突出显示的文本或任何表行为空的问题

当用户单击导出按钮时，我正在使用jsPDF API将数据导出到PDF。 当存在突出显示的文本时生成PDF时，或者任何表行中没有值时，我将遇到问题。 生成的PDF中未显示突出显示的文本颜色，如果表中包含任何空白值，则表格未在生成的PDF中正确显示。

请在线演示https://plnkr.co/edit/GfXDGHWNHh2Mb89In7zK?p=preview

演示：

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); }); } } ]); 

               
 Export 
 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) This is red texttttt 
text hightlighted with yellow color
asdjasdjasdsjadhjsahdjasdh red color
asdasdasdasdsaas -- bold and red colorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
 
 
Coffee
 
Tea
 
Milk
 
 
Below are the options with bullets
option1
option2
Below are options with numbers
option1
option2
 

133



666


 
   

我确信应该有一些CSS / js黑客来解决这个问题。 任何输入都有帮助。

Answer 1

那么它不是最好的解决方案，但你可以将整个文档转换为图像然后在页面中打印图像，或者你可以使用他们的新方法addHTML但它们不会产生很好的效果

方法一：

  $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); }); } 

方法2：printDiv是div，你必须在其中包装整个html内容

  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'); } }); } } ]);