Reputation: 555
I have the following JavaScript code https://jsfiddle.net/d72sgwrc/5/ Which suppose to save the image of my screen turn it into Canvas and save it into PDF. Once the file is downloaded on my local machine I am able to view the PDF file within the browser but if I want to open the file on Acrobat PDF viewer I get the following error "There was and error Processing a page. There was a problem readying this document(110). my HTML page is just a table with bunch of generated number.
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 is in JSFiddle as I cant paste it here, I get error https://jsfiddle.net/d72sgwrc/5/
I am using the following JS libraries
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
Upvotes: 3
Views: 4452
Reputation: 11
I have had the same issue, I add all parameters of the function.
// Set PDF
Upvotes: 1
Reputation: 71
I ran into this same issue. Upgrading to jsPDF 1.3.4 solved it for me.
Upvotes: 5
Reputation: 555
The version of jspdf debug is very important.
<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>
Upvotes: 1