Dave Russell » Javascript

Converting HTML to PDF using EvoPdf

Dave — Thu, 14 Apr 2011 07:14:47 +0000

We have been using ABCpdf to generate PDFs on the fly of the page currently being browsed. It has given us years of service, but now with the new version of our site I have had to find an alternative solution as my page body gets styled out of sight and then moved into position using jquery to change the left:-2000px to left:0px;. ABCpdf ignores javascript so I am getting a lovely half generated page in the PDF output.

The only product I have found out there on the interwebs that understands javascript is EvoPdf. I have downloaded the zip file of 52mb done the install – which by the way could not be easier: add reference to dll, copy another, and then call the following method:

usingEvoPdf.HtmlToPdf;
private void ConvertURLToPDF()

    {

        string urlToConvert = Request["url"];
        PdfConverter pdfConverter = new PdfConverter();

        pdfConverter.LicenseKey = "xxxxxxx";

        pdfConverter.PdfDocumentOptions.PdfPageSize = PdfPageSize.A4;

        pdfConverter.PdfDocumentOptions.PdfCompressionLevel = PdfCompressionLevel.Normal;

        pdfConverter.PdfDocumentOptions.PdfPageOrientation = PdfPageOrientation.Portrait;

        pdfConverter.PdfDocumentOptions.LiveUrlsEnabled = true;

        pdfConverter.JavaScriptEnabled = true; //the important bit – waits for javascript

        pdfConverter.ConversionDelay = 10;

        pdfConverter.InterruptSlowJavaScript = false;

        pdfConverter.PdfDocumentOptions.JpegCompressionEnabled = true;

        pdfConverter.PdfDocumentOptions.FitWidth = true;
        byte[] pdfBytes = pdfConverter.GetPdfBytesFromUrl(urlToConvert);

        System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;

        response.Clear();

        response.AddHeader("Content-Type", "application/pdf");

        response.AddHeader("Content-Disposition", String.Format("attachment; filename=Output.pdf; size={0}", pdfBytes.Length.ToString()));

        response.BinaryWrite(pdfBytes);

        response.End();

}

The license is a little hefty, but you can trail the full version to see if it suits your needs before dusting off the credit card – the only thing is the outputed PDF will have a watermark over it until you get a license.

Detect browser window focus

Dave — Wed, 13 Apr 2011 11:55:50 +0000

The scenario: You have a link that creates a hidden iframe which generates a file download (a pdf of the current page in my example). You have cleverly given the user some visual feedback in the form of an animated ‘waiting’ gif and you would like the clever animation to go away once the user has saved the file.

Using a javascript setTimeout is just not going to work as you don’t know how long this will take, so the logical thing is to detect when the browser window gets focus again.

functiononFocus(){ $(‘#icon_pdf’).removeClass(‘icon_pdf_waiting’);};
if(/*@cc_on!@*/false){ document.onfocusin=onFocus;/*IE*/}else{ window.onfocus=onFocus;}
    $(‘#icon_pdf’).click(function() {

        $(this).addClass(‘icon_pdf_waiting’);

        $(‘iframe#pdfFrame’).remove();

        $(document.body).append(‘’);

        $(‘iframe#pdfFrame’).attr(‘src’, ‘/pdf/save.aspx?url=’ + location.href);

    });

The icon_pdf_waiting class replaces the existing icon with a waiting icon, so removing the class once you finished puts the existing icon back.

I only needed the onfocus event, but you could also make use of the onblur if need be.

Getting destination page to reload after back button is clicked

Dave — Fri, 07 Jan 2011 09:55:21 +0000

I found that in certain cases that the back button was causing much mayhem on my site as the code is not reloaded and therefore caused some unwanted behaviour.

So here’s my cross-browser fix that I have devised after much googling. For a change IE was not the challenge, but rather Firefox as the onload event does not fire when the back button is used.

First, oddly, you need to clear the unload event

<body onunload="">

Then add a hidden field to the page to use as a flag:

<input type="hidden" id="refreshed" value="no" />

Lastly, the magic javascript. If you are using jQuery, don’t try and modernise the code and stick it in the .ready event – it won’t work, I tried.

onload = function() {

    var e = document.getElementById("refreshed");

    if (e.value == "no") e.value = "yes";

    else { e.value = "no"; location.reload(); }

}

Good luck, let me know if this helped.

Thanks go to those who contributed.

Using Javascript to validate South African ID Numbers

Dave — Tue, 02 Mar 2010 13:00:21 +0000

I have just finished a neat little client side ID number validation script that ensures that the ID number passed is:

Numeric,
is 13 Digits long,
has a valid date with the first 6 characters
and passes the Luhn algorithm test.

function ValidateIDnumber(idnumber) {

//1. numeric and 13 digits

if (isNaN(idnumber) || (idnumber.length != 13)) { return false; }

//2. first 6 numbers is a valid date

var tempDate = new Date(idnumber.substring(0, 2), idnumber.substring(2, 4) - 1, idnumber.substring(4, 6));

if (!((tempDate.getYear() == idnumber.substring(0, 2)) &amp;&amp; (tempDate.getMonth() == idnumber.substring(2, 4) - 1) &amp;&amp; (tempDate.getDate() == idnumber.substring(4, 6)))) { return false; }

//3. luhn formula

var tempTotal = 0; var checkSum = 0; var multiplier = 1;

for (var i = 0; i &lt; 13; ++i) {

tempTotal = parseInt(idnumber.charAt(i)) * multiplier;

if (tempTotal &gt; 9) { tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1)); }

checkSum = checkSum + tempTotal;

multiplier = (multiplier % 2 == 0) ? 1 : 2;

}

if ((checkSum % 10) == 0) { return true };

return false;

}