jsPDF addHTML方法無法正常工作

我正在使用jsPdf official demo site的示例來測試新的addHTML函數，只需稍作更改即可直接保存生成的PDF。jsPDF addHTML方法無法正常工作

console.log("testing"); 
var pdf = new jsPDF('p','pt','a4'); 
pdf.addHTML(document.body,function() { 
    console.log("started"); 
    pdf.save() 
    console.log("finished"); 
}); 
console.log("testing again");

當我運行上面的腳本時，它不會生成錯誤消息，也不會生成PDF。在控制檯中，只顯示「測試」和「再次測試」，所以我猜測腳本沒有運行。

我錯過了什麼？我使用引導選項卡功能和使用highchart生成的一些圖表。 jsPDF處理起來太複雜了嗎？

來源

2015-03-02 cytsunny

我不確定jsPDF是否支持Highcharts中使用的SVG。看看：[問題＃204]（https://github.com/MrRio/jsPDF/issues/204），[問題＃384]（https://github.com/MrRio/jsPDF/issues/384）和[issue＃437]（https://github.com/MrRio/jsPDF/issues/437）。 – 2015-03-02 13:13:10

謝謝，但即使它們不支持SVG，也不會有任何錯誤信息令人困惑。 – cytsunny 2015-03-03 02:07:12

我完全同意你的看法。最後一次提交是他們在25天前提交的，太好了，這不是一個被遺棄的項目;） – 2015-03-03 10:19:14

jspdf無法轉換svg元素。這可以使用this庫輕鬆完成。

用法示例 -

function _svgToCanvas() { 
    var nodesToRecover = []; 
    var nodesToRemove = []; 

    var svgElems = document.getElementsByTagName("svg"); 

    for (var i = 0; i < svgElems.length; i++) { 
     var node = svgElems[i]; 
     var parentNode = node.parentNode; 
     var svg = parentNode.innerHTML; 

     var canvas = document.createElement('canvas'); 

     canvg(canvas, svg); 

     nodesToRecover.push({ 
      parent: parentNode, 
      child: node 
     }); 
     parentNode.removeChild(node); 

     nodesToRemove.push({ 
      parent: parentNode, 
      child: canvas 
     }); 

     parentNode.appendChild(canvas); 
    } 
}

然後 -

var pdf = new jsPDF('p', 'px', 'a4'); 
var options = { 
    pagesplit: true 
}; 
pdf.addHTML($('body'), 0, 0, options, function() { 
    console.log("done"); 
    pdf.save('test.pdf') 
    });

來源

2015-03-25 07:12:48 prad

首先，你需要或者html2canvas或rasterizeHTML使用jsPDF的addHTML方法。進一步的問題是，jsPDF覆蓋了html2canvas庫定義的許多方法。只需查看jsPDF源代碼並搜索html2canvas即可。即使在我的項目中包含html2canvas腳本後，我遇到了與您描述的完全相同的問題。

最後一個問題是包含腳本的順序。對於我來說，它適用於當前版本的jsPDF（1.1.239）和html2canvas（0.5.0-alpha1），之後包括jsPDF和html2canvas。在我的項目，它看起來是這樣的：

<head> 
    <script src="./lib/jspdf/jspdf.debug.js"></script> 
    <script src="./lib/html2canvas/html2canvas.js"></script> 
    <!-- more includes ... --> 
</head>

我認爲html2canvas方法jsPDF重寫是不好的做法，因爲它是難以維持的時候html2canvas的變化，這個問題說明。

也許這個問題在通過RequireJS完成包含腳本時表現不同。

來源

2016-01-04 18:49:16 Michbeckable

已經繞過了使用其他庫的問題。沒有時間去測試你的方法，所以很抱歉，我現在不能把這個標記爲正確的答案。但回答這個問題仍然是滿意的。 – cytsunny 2016-01-05 05:13:45

jsPDF addHTML方法無法正常工作

回答

相關問題