Browser support

[throrin19]

Hi, I've test your library in different navigators :

• Safari : download does no works but ive no error
• IE9 : Blob is undefined
• Android default Navigator : Infinite download

[bpampuch]

I think I'll have to abandon FileSaver and use https://github.com/dcneiner/Downloadify instead... I'm not sure if this meets the 'performance' milestone though

[nate-summercook]

The Problem is not only about the missing Blob.js, but mainly, because IE9 doesn't support data: URLs to be opened in new windows or iframes. There is just no way in IE9 to save a File which comes from the client side. At least non that I know of. This is also the reason why FileSaver.js doesn't come with Blob.js included. Only IE9 is missing the Blob implementation but it isn't capable of saving files anyway...

[lvarayut]

Do you have some progress/plan on this bug? It works perfectly on Chrome but doesn't work on others.

[Wabbala]

Actually it is possible to support it in IE9, I have been doing so using a small library called downloadify which makes use of flash.

One can try the following script (any questions, just ask me):

$('body').append("<div id='downloadify'></div>");
var pdfOutput;
pdfMake.createPdf(docDefinition).getBase64(function(outDoc) {
    pdfOutput = outDoc;
});
$("#downloadify").downloadify({
    filename: filename,
    dataType: 'base64',
    data: pdfOutput,
    onComplete: function () {
                    pdfOutput = null; // cleaning
                    alert('done');
            },
    onCancel: function() {
                    pdfOutput = null; // cleaning
                    alert('Cancelled');
            },
    onError: function() { 
                alert('You must put something in the File Contents or there will be nothing to save!');             
            },
    swf: './downloadify/media/downloadify.swf',
    downloadImage: './downloadify/images/download.png', // just a transparant image to put your own button under it, i have a button underneath it of width 110 and height 30,
    width: 110,
    height: 30,
    transparent: true,
    append: false
});

[jthoenes]

Thanks for the description @Wabbala. If you want, you could integrate downloadify in a pull request. Would be happy to help out, when you need to create one.

[munikumar604]

Hi Wabbala ,
you way is not working

<title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="libs/SWObject.js"></script> <script src="libs/Downloadify.js"></script> <script src="build/pdfmake.min.js"></script> <script src="build/vfs_fonts.js"></script> <script> function clickme() { var docDefinition = { content: [ // if you don't need styles, you can use a simple string to define a paragraph 'This is a standard paragraph, using default style',

              // using a { text: '...' } object lets you set styling properties
              { text: 'This paragraph will have a bigger font', fontSize: 15 },

              // if you set the value of text to an array instead of a string, you'll be able
              // to style any part individually
              {
                  text: [
                    'This paragraph is defined as an array of elements to make it possible to ',
                    { text: 'restyle part of it and make it bigger ', fontSize: 15 },
                    'than the rest.'
                  ]
              }
            ]
        };

       // pdfMake.createPdf(docDefinition).open();
        $('body').append("<div id='downloadify'></div>");
        var pdfOutput;
        pdfMake.createPdf(docDefinition).getBase64(function (outDoc) {
            pdfOutput = outDoc;
        });
        var filename = "hi";
        $("#downloadify").downloadify({
            filename: filename,
            dataType: 'base64',
            data: pdfOutput,
            onComplete: function () {
                pdfOutput = null; // cleaning
                alert('done');
            },
            onCancel: function () {
                pdfOutput = null; // cleaning
                alert('Cancelled');
            },
            onError: function () {
                alert('You must put something in the File Contents or there will be nothing to save!');
            },
            swf: './downloadify/media/downloadify.swf',
            downloadImage: './downloadify/images/download.png', // just a transparant image to put your own button under it, i have a button underneath it of width 110 and height 30,
            width: 110,
            height: 30,
            transparent: true,
            append: false
        });
    }
</script>
<button onclick="clickme()">click Me</button>

click Me please help me .

[PaulL1]

Placed this comment on #229, but hadn't noticed it was closed as a duplicate. Updating here instead:

@bpampuch: We're using this library in the angular-ui-grid, thanks for the excellent code.

We have a function that downloads csv files in IE, it has a complex set of detection logic and specific functionality for different browsers, but it does allow download of arbitrary browser created content. It'd be nice if pdfMake also offered a similar functionality, as for pdfMake we're currently just calling the .download() method.

The relevant code file is https://github.com/angular-ui/ng-grid/blob/master/src/features/exporter/js/exporter.js, the relevant method is downloadFile at or about line 769. To see it working you can view the tutorial for the export feature: http://ui-grid.info/docs/#/tutorial/206_exporting_data. The basic steps are to click the grid menu (icon top right of the grid), and select "export all data as csv".

If it isn't possible to implement the download function, then perhaps you could answer a different question - can I get the rendered pdf from pdfMake and then execute the download myself?

[PaulL1]

Thanks for the information that you provided @bpampuch. For those interested, the ui-grid export function is using some rather kludgy code to extract the pdf as a blob, then trigger an IE download of that file, and you could do the same if you had the same need.

[floydbear]

I currently have a working solution for generating a PDF using in IE9+, Chrome, Firefox, etc. I am using:

pdfmake.createPdf(docDefinition).getBase64(...

However, because of the getter/setter problem with IE8, I am not able to generate the pdf. I have the es5 shim and es5 sham, that have helped.

Does anyone know how to get to work in IE8, even it it is a roundabout way? Or is there an update on this? :)

[HIKALU-Z]

hello ,when i export data,i find it isn't work for chinese.how can i slove this problem?

[feratpl]

floydbear - Your solution is not working, Can you please give more details on how did you implement this for IE ?

[feratpl]

@Wabbala - Do we have any other solution , rather than using downloadify which is a flash solution ?

Any help is appreciated.

[floydbear]

@Frank2121 : I was able to get this to work for IE9+.

My JS looked like such:

pdfMake.createPdf(docDefinition).getBase64(function (pdfOutput) { // handle data });

I then created an AJAX endpoint that converted the returned "pdfOutput" into a PDF file. I did this in C# as follows, where PDFFile was just an object I created with the data.

[HttpPost]
public ActionResult GetPdf(PDFFile file)
{
    byte[] byteArray = Convert.FromBase64String(file.Data);
    return File(byteArray, "application/pdf", "file.pdf;
}

Inside the JS function I submitted a fake form that called this ajax request to then return the file.

Hope that helps!

[feratpl]

@floydbear - thanks for your update, but i was most looking at a Client side solution. Doing a HTTP POST will be performance issue.

So nothing work at Client side as it works for Chrome and FF ?

[liborm85]

continued here: #800