2016-12-02 87 views
2

我有以下JavaScript代碼https://jsfiddle.net/d72sgwrc/5/它假設保存我的屏幕圖像將其轉換爲Canvas並將其保存爲PDF。一旦文件被下載到本地機器上,我就能夠在瀏覽器中查看PDF文件,但是如果我想在Acrobat PDF查看器上打開文件,則會出現以下錯誤:「出現錯誤處理頁面。出現問題準備好這個文件(110)。我的HTML頁面僅僅是一個一羣生成的數字的表格。JSPDF本地保存的文件給Acrobat文檔[110]錯誤

JS

function exportPDF() { 
var pdf = new jsPDF('l', 'px'), 
    source = $('body')[0]; 
var canvasToImage = function(canvas) { 
    var img = new Image(); 
    var dataURL = canvas.toDataURL('image/png'); 
    img.src = dataURL; 
    return img; 
}; 
var canvasShiftImage = function(oldCanvas, shiftAmt) { 
    shiftAmt = parseInt(shiftAmt) || 0; 
    if (!shiftAmt) { 
     return oldCanvas; 
    } 

    var newCanvas = document.createElement('canvas'); 
    newCanvas.height = oldCanvas.height - shiftAmt; 
    newCanvas.width = oldCanvas.width; 
    var ctx = newCanvas.getContext('2d'); 

    var img = canvasToImage(oldCanvas); 
    ctx.drawImage(img, 0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height); 

    return newCanvas; 
}; 


var canvasToImageSuccess = function(canvas) { 
    var pdf = new jsPDF('l', 'px'), 
     pdfInternals = pdf.internal, 
     pdfPageSize = pdfInternals.pageSize, 
     pdfScaleFactor = pdfInternals.scaleFactor, 
     pdfPageWidth = pdfPageSize.width, 
     pdfPageHeight = pdfPageSize.height, 
     totalPdfHeight = 0, 
     htmlPageHeight = canvas.height, 
     htmlScaleFactor = canvas.width/(pdfPageWidth * pdfScaleFactor), 
     safetyNet = 0; 

    while (totalPdfHeight < htmlPageHeight && safetyNet < 15) { 
     var newCanvas = canvasShiftImage(canvas, totalPdfHeight); 
     pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE'); 

     totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor); 

     if (totalPdfHeight < htmlPageHeight) { 
      pdf.addPage(); 
     } 
     safetyNet++; 
    } 

    pdf.save('test.PDF'); 
}; 
html2canvas(source, { 
    onrendered: function(canvas) { 
     canvasToImageSuccess(canvas); 
    } 
}); 
} 

    exportPDF(); 

HTML中的jsfiddle因爲我不能在這裏貼,我得到錯誤https://jsfiddle.net/d72sgwrc/5/

我正在使用以下JS庫
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js

https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js

+0

懶洋洋地將你的代碼複製到小提琴並粘貼鏈接並不酷。你遺漏了最後一個'}',你沒有包含jQuery或其他你正在使用的庫,並且你的代碼沒有運行。我更新了你的小提琴,但由於你太懶惰而沒有做好,所以我懶得幫你。祝你好運。 –

+0

@Iwrestledabearonce。不,我爲此感到抱歉。我試圖讓代碼在這裏,但它給我錯誤。所以我把它複製到jsfiddle中。我試着重新編輯這個 –

+0

@Iwrestledabearonce。我再次道歉,我修復了它 –

回答

1

jspdf調試的版本是非常重要的。

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> 
     <script src="https://cdn.rawgit.com/MrRio/jsPDF/master/libs/png_support/png.js"></script> 
     <script src="https://cdn.rawgit.comMrRio/jsPDF/master/plugins/addimage.js"></script> 
     <script src="https://cdn.rawgit.com/MrRio/jsPDF/master/libs/png_support/zlib.js"></script> 
1

我遇到了同樣的問題。升級到jsPDF 1.3.4爲我解決了它。