0

In my org we have a Vf page with a download link. Onclick of this link a csv file is downloaded. This is working absolutely fine with Chrome and Firefox, but the file doesn't download with IE. Any help is very much appreciated. Here is the code:

vf:

<apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'underscore-min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'react.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'react-dom.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'browser.min.js')}"/>

getPricingData() {
                CC_PavilionDownloadPricingCtrl.getorderItemsFromPriceBookEntry(
                    function(results, event) {
                        $('#myModal').modal('hide')
                        var key = _.keys(results)[0];
                        var today = moment().format("MM D YYYY");
                        var values = _.values(results)[0];

                        var data = [];
                        for(var idx = 0; idx < values.length; idx++) {
                            data.push({
                                'Part Number': values[idx].productCode !== undefined ? values[idx].productCode : '',
                                'Description': values[idx].productName !== undefined ? values[idx].productName : '',
                                'UM': values[idx].UM !== undefined ? values[idx].UM : 'EA',
                                'List Price': values[idx].listPrice !== undefined ? values[idx].listPrice : '',
                                'Disc. Price': values[idx].discountPrice !== undefined ? values[idx].discountPrice : '',
                                'Qty Disc': values[idx].qtyDiscount !== undefined ? values[idx].qtyDiscount : '',
                                'Qty Price': values[idx].qtyPrice !== undefined ? values[idx].qtyPrice : '',
                                'Type': values[idx].code !== undefined ? values[idx].code : 'GC'
                            }); 

                        }
                        JSONToCSVConvertor(data, key, today, true);

                    }, {
                        buffer: false
                    }
                );
            },
render: function() {
            return (
<div className="col-md-10">
                              <div className="panel panel-default">
                                <div className="panel-heading" data-toggle="modal" data-target="#myModal" onClick={this.getPricingData}>Download Pricing</div>
                              </div>
</div>
              );
            }
        });

        var ModalBox = React.createClass({
            render: function() {
                return (
                    <div id="myModal" className="modal fade" tabIndex="-1" role="dialog">
                        <div className="modal-dialog">
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h4 className="modal-title">Please Wait...</h4>
                                </div>

                                <div className="modal-body">
                                    <center><img id="loading" src="/img/loading32.gif" /></center>
                                </div>
                                {/* modal-content */}
                            </div>
                        {/* modal-dialog */}
                        </div>
                    {/* modal */}
                    </div>
                );
            }
        })

Not sure sure if i had to add any javascript library for the download to work.

  • No JS errors or other warnings ? Are you sure that this is related to anything of the salesforce logic ? If it's purely related to HTLM/Javascript and browser support this question may be better suited for stackoverflow. – Samuel De Rycke Dec 6 '16 at 8:35
0

yes this is a vf page and there is a controller as well from which the method 'getorderItemsFromPriceBookEntry' is called. I am actually getting JS errors on IE as: SCRIPT5045: Assignment to read-only properties is not allowed in strict mode. and this is pointing to the line "Link.style = "visibility:hidden";" in the below code, i even tried changing it to visibility:display, but had no luck.

var JSONToCSVConvertor = function(JSONData, ReportTitle, today, ShowLabel) {
           //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
           var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

           var CSV = '';    
           //Set Report title in first row or line

           //CSV += ReportTitle + '\r\n\n';

           //This condition will generate the Label/Header
           if (ShowLabel) {
               var row = "";

               //This loop will extract the label from 1st index of on array
               for (var index in arrData[0]) {

                   //Now convert each value to string and comma-seprated
                   row += index + ',';
               }

               row = row.slice(0, -1);

               //append Label row with line break
               CSV += row + '\r\n';
           }

           //1st loop is to extract each row
           for (var i = 0; i < arrData.length; i++) {
               var row = "";

               //2nd loop will extract each column and convert it in string comma-seprated
               for (var index in arrData[i]) {
                   row += '"' + arrData[i][index] + '",';
               }

               row.slice(0, row.length - 1);

               //add a line break after each row
               CSV += row + '\r\n';
           }

           if (CSV == '') {        
               alert("Invalid data");
               return;
           }   

           //Generate a file name
           var fileName = ReportTitle.replace(/ /g,"_");   

           //Initialize file format you want csv or xls
           var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

           // Now the little tricky part.
           // you can use either>> window.open(uri);
           // but this will not work in some browsers
           // or you will not get the correct file extension    

           //this trick will generate a temp <a /> tag
           var link = document.createElement("a");    
           link.href = uri;

           //set the visibility hidden so it will not effect on your web-layout
           link.style = "visibility:hidden";
           link.download = fileName + ' ' + today + ".csv";

           //this part will append the anchor tag and remove it after automatic click
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
       }

       ReactDOM.render(<Content />, document.getElementById('content'));
    </script>
</apex:page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.