javascript - JSPDF Saved file locally gives document [110] error with Acrobat - Stack Overflow

admin管理员组

文章数量:1336660

I have the following JavaScript code / 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 /

I am using the following JS libraries
.3.2/jspdf.debug.js

.js/1.1.20151003/FileSaver.min.js

.4.1/html2canvas.min.js

.3.2/jspdf.min.js

I have the following JavaScript code https://jsfiddle/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/d72sgwrc/5/

I am using the following JS libraries
https://cdnjs.cloudflare./ajax/libs/jspdf/1.3.2/jspdf.debug.js

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

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

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

• javascript
• pdf-generation
• jspdf

Share Improve this question Follow edited Dec 2, 2016 at 19:49 benji_r asked Dec 2, 2016 at 19:17 benji_rbenji_r 55522 gold badges1717 silver badges3535 bronze badges 6

• lazily copying your code into a fiddle and pasting the link is not cool. you left off the last }, you didn't include jQuery or the other library you were using and your code didn't run. I updated your fiddle but since you were too lazy to do it right, i'm too lazy to help you. good luck. – I wrestled a bear once. Commented Dec 2, 2016 at 19:38
• @Iwrestledabearonce. no i am sorry for that. I tried to have the code here but it was giving me error. So I copied it in the jsfiddle. I try to re edit this – benji_r Commented Dec 2, 2016 at 19:41
• @Iwrestledabearonce. I apologize again, I fixed it – benji_r Commented Dec 2, 2016 at 19:51
• I have the same issue now and it worked just the other week. I also use cdnjs.cloudflare./ajax/libs/jspdf/1.3.2/jspdf.debug.js – Scalarr Commented Dec 15, 2016 at 19:25
• @Scalarr here is how I solved it , use different version of scripts – benji_r Commented Dec 16, 2016 at 18:52

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

I ran into this same issue. Upgrading to jsPDF 1.3.4 solved it for me.

The version of jspdf debug is very important.

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

I have had the same issue, I add all parameters of the function.

// Set PDF

1. let doc = new jsPDF('p', 'mm', [297, 210]);
2. doc.addImage(dataURL, "JPEG", marginPDF, 15, widthImgPDF, heigthImgPDF, "fotoX", "SLOW");
3. doc.save("Fire Inspection - " + questID + ".pdf");

本文标签： javascriptJSPDF Saved file locally gives document 110 error with AcrobatStack Overflow