Not working with IE

[munikumar604]

Hi Team,
I used pdfmake in IE it is not working properly.

[jthoenes]

Duplicate of #16

[munikumar604]

Hi jthoenes,
How to create pdf using pdf make In IE. Please help me.

Thanks ,
Muni

[jthoenes]

Hi,

unfortunately, pdfmake does not support IE as of now.

Best regards
Johannes

[Wabbala]

@munikumar604 and @jthoenes, check my work around in #16

[munikumar604]

Hi wabbala,
Your way also 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>

above is my page. pdf is not created

[Wabbala]

Does the example I linked to work with you?

On 4 March 2015 at 14:20, munikumar604 notifications@github.com wrote:

Hi wabbala,
Your way also not working,

—
Reply to this email directly or view it on GitHub
#219 (comment).

[mathewbeno]

Do we get a fix for it?

[bpampuch]

As I've written in #230 - "Data URIs in IE can only be used for images. This is an IE limitation. Unfortunately I have no concept for a workaround"

[Dev63]

@bpampuch How about putting the data in LocalStorage, and asking the caller to host a blank template page on their site (which could be fixed name or a setting option) which will read and display that data?

@jthoenes You closed this issue and marked it a duplicate of an IE9 issue ... but this is about IE11. Did something change recently, or has pdfmake never supported IE (I thought it did!).

[bpampuch]

@Dev63 if we set the content type to application/pdf browser won't execute the code so we can't access localstorage

[bpampuch]

The only workaround I know is an echo service (you send the file to the server and it sends it back) for IE, but this sucks IMO

[PaulL1]

@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?

[raghav135]

Getting this error in IE 10 with pdfmake

http://ui-grid.info/docs/#/tutorial/206_exporting_data

TypeError: Object doesn't support property or method '__defineGetter__'
   at FontWrapper (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:14169:4)
   at provideFont (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:2269:4)
   at Anonymous function (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:16130:4)
   at measure (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:16118:3)
   at buildInlines (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:15941:3)
   at measureLeaf (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:14557:3)
   at Anonymous function (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:14437:5)
   at auto (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:16306:3)
   at measureNode (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:14422:3)
   at Anonymous function (http://ui-grid.info/docs/grunt-scripts/pdfmake.js:14709:5) 

[paulkoegel]

a browser support table in the README would be nice.

[jgdovin]

One possibility I am currently looking into as a work around is integrating Mozilla's PDF.js into our app and passing it a dataUri from PDFMake. This should allow it to work in IE. Link to Mozilla PDF.js here: https://mozilla.github.io/pdf.js/

[pburrows]

Just saw that jsPDF is using downloadify for IE compatibility https://parall.ax/products/jspdf

[sirhcybe]

I ran into this issue and decided to go with using feature detection to find if data URIs are supported for opening PDFs and using the .download() function if they were not. I had a hard time finding a good feature detection script for this so I thought I'd post it here for anyone else who's looking for one. The best one I could find was proposed by KevinMartin in a Modernizr issue.

[nigel-dewar]

Why would you make a library that doesn't work in IE?

[sebass]

as stated before: a browser support table in the README would be nice...

[samaelsimoes]

Hello good morning, I found this solution, it´s working for me.
ExpenseService.query(function(ex) { // ex IS MY RETURN SERVER

		var dataexp = [];
		var body = [];
		
		var columns = {numero: 'número', usuario: 'usuario', descricao: 'descrição', valor:'Valor R$', 
					   valorAdiantamento:'Adiantamento', data:'Data', situacao:'Situação', 
					   centrocusto:'Centro de Custo', objetivo:'Objetivo', tipodespesa:'Tipo de Despesa'
					  }
		
		for (var i = 0; i < ex.length; i++) { // Created 1º format reportexpense
			
			var object = {};        
			
			if(i === 0){
				dataexp.push(columns);
			}
			
            object.code = ex[i].code.toString();
            object.userOid = ex[i].userOid;
            object.description = ex[i].description;
            object.value = ex[i].value.toString();
            object.paidValue = ex[i].paidValue.toString();
            object.date = ex[i].date;
            
             if( ex[i].situation == 0 ) {
                
                 object.situation = "Concluído";
            }else if( ex[i].situation == 1 ) {
                
                 object.situation = "Pago";
            }else if( ex[i].situation == 2 ) {
                
               object.situation = "Concluído";
            }else if( ex[i].situation == 3 ) {
                
                object.situation = "Aprovado";
            }else if( ex[i].situation == 4 ) {
                
                object.situation = "Pago";
            }
            
            object.costcenter = ex[i].costecenterOid;
            object.reason = ex[i].reason;
            object.type = ex[i].typeOid;
            
            dataexp.push(object);   
		}
		    		
		for (var key in dataexp) { // convert 2º format report expense array['value','value'...]
						    	
			var dexp = dataexp[key];
			var reportexp = [];
			    			       
			if(key === "0"){// Create header report expense
				reportexp.push( dexp.numero );
				reportexp.push( dexp.usuario );
				reportexp.push( dexp.descricao );
				reportexp.push( dexp.valor );
				reportexp.push( dexp.valorAdiantamento );
				reportexp.push( dexp.data );
				reportexp.push( dexp.situacao );
				reportexp.push( dexp.centrocusto );
				reportexp.push( dexp.objetivo );
				reportexp.push( dexp.tipodespesa );
				body.push( reportexp );
			}else if( key != "0"){ 				
				reportexp.push( dexp.code );
				reportexp.push( dexp.userOid );
				reportexp.push( dexp.description );
				reportexp.push( dexp.value  );
				reportexp.push( dexp.paidValue );
				reportexp.push( dexp.date);
				reportexp.push( dexp.situation );
				reportexp.push( dexp.costcenter );
				reportexp.push( dexp.reason );
				reportexp.push( dexp.type );			        
				body.push( reportexp );
			}
		}	

		var dexps = {
				
			pageSize : 'A3',			   		   
			content: [
				{text: 'Wizfee - controle de despesa ', style: 'header'},					
				{		
				width: 500,
					table: {							
						style: 'tableExample',
						headerRows: 1,
				        widths: [50, 55, 55, 55, 80, 70, 55, 85, 75, 80], 
						body: body					
					},
					//layout: 'noBorders'
				},
				//{ width: '*', text: 'Wizfee - controle de despesa ' },
		  	],
		  	styles: {
				header: {
					fontSize: 18,
					bold: true,
					margin: [0, 0, 0, 10]
				},
				subheader: {
					fontSize: 16,
					bold: true,
					margin: [0, 10, 0, 5]
				},
				tableExample: {
					margin: [0, 5, 0, 15]
				},
				tableHeader: {
					bold: true,
					fontSize: 13,
					color: 'black'
				}
			},
			defaultStyle: {
				alignment: 'justify'
			}
		};

		pdfMake.createPdf(dexps).open();
		pdfMake.createPdf(dexps).download('despesas.pdf');
	}, function( error ) {			 
		toastr.error( error );
	});

[mikeplate]

There is apparently an IE specific API for downloading blobs.

https://msdn.microsoft.com/en-us/library/hh779016%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

I just changed from:

pdfMake.createPdf(doc).download("Report.pdf");

to

if (window.navigator.msSaveBlob) {
    pdfMake.createPdf(doc).getBlob(function (result) {
        window.navigator.msSaveBlob(result, "Rapport.pdf");
    });
}
else {
    pdfMake.createPdf(doc).download("Report.pdf");
}

[tcsaddul]

Would instruct clients to use Firefox or Chrome

[liborm85]

download action works also in IE.