我有一種情況，我在網頁中生成幾個圖並在畫布中顯示它們，我的要求是點擊下載按鈕後，我應該能夠導出所有畫布圖像到PDF。從不同畫布拉出圖像並導出到單個pdf

我已經成功地做到了這一點，使用html2canvas和Jspdf單一的canvas元素，但無法弄清楚如何做都一樣。

我遵循這個JSFiddle代碼從Html2canvas和jspdf生成pdf。

$(document).ready(function() { 
    var d_canvas = document.getElementById('canvas'); 
    var context = d_canvas.getContext('2d'); 
    context.moveTo(20, 20); 
    context.lineTo(100, 20); 
    context.fillStyle = "#999"; 
    context.beginPath(); 
    context.arc(100, 100, 75, 0, 2 * Math.PI); 
    context.fill(); 
    context.fillStyle = "orange";  
    context.fillRect(20, 20, 50, 50); 
    context.font = "24px Helvetica"; 
    context.fillStyle = "#000"; 
    context.fillText("Canvas", 50, 130); 
    $('#ballon').draggable(); 
    $('#download').click(function() {  
     html2canvas($("#canvas"), { 
      onrendered: function(canvas) {   
       var imgData = canvas.toDataURL(
        'image/png');    
       var doc = new jsPDF('p', 'mm'); 
       doc.addImage(imgData, 'PNG', 10, 10); 
       doc.save('sample-file.pdf'); 
      } 
     }); 
    }); 
});

請幫助，在此先感謝。

來源

2015-06-09 Pratswinz

loop？請發佈一些示例代碼。 – wahwahwah

添加jsfiddle鏈接 – Pratswinz

這是如何不按預期工作？ – wahwahwah

應該沒有必要爲此使用html2canvas。它只會付出代價爲您提供另一個畫布元素。您可以直接使用原始畫布元素和toDataURL()與jsPdf。

例（部分僞）

這將收集頁面中所有的油畫，並把它們在一個PDF。僞部分是寬度，增量，因子等缺少的變量，但你應該明白它的要點。

注意：圖像的大小必須在您用於文檔的單元中給出，因此您需要使用基於文檔DPI的預計算因子將像素位置和大小轉換爲毫米表示這裏沒有顯示，但this可能會有所幫助）。

var x = someX, 
    y = someY, 
    dx = somDeltaForX, 
    dy = somDeltaForY, 
    i, 
    canvases = document.querySelectorAll("canvas"), 
    pdf = new jsPDF('p', 'mm'), 
    f = convertionFactorFromPixelstoMM; 


for(i = 0; i < canvases.length; i++) { 
    var url = canvases[i].toDataURL("image/jpeg", 0.75); 
    doc.addImage(url, "JPEG", x * f, y * f, canvases[i].width * f, canvases[i].height * f); 
    x += dx; // tip: dx could also be based on previous canvas width in non-uniform sizes 
    if (x > widthOfPage) { 
    x = 0; 
    y += dy; 
    } 
}

來源

2015-06-09 20:57:39 K3N

這是非常簡單的，我只是改變了說法，以這條線

html2canvas($("#canvas"), {

而是通過單獨的畫布，然後嘗試將它們導出到一個PDF的，而我一直在不同的畫布上股利和將Div id傳遞給上述行，並將兩個畫布導出爲單個pdf文件

來源

2015-06-17 06:34:55 Pratswinz

從不同畫布拉出圖像並導出到單個pdf

回答

例（部分僞）

相關問題