a réalisé la fonctionnalité de téléchargement en codant en dur la valeur d'un fichier csv

Question

J'ai atteint la fonctionnalité download en codant en dur la valeur d'un fichier csv mais maintenant je reçois plus de valeurs dans le tableau health qui a différents documents. Dans ce document, un document est pdf et un autre est txt. Si health[0].mobileVersion est pdf, j'ai besoin de télécharger le document en format pdf. De même si health[0].mobileVersion est txt, j'ai besoin de télécharger le document en tant que txt.

Pouvez-vous me dire comment résoudre ce problème?

Mon code ci-dessous.

$("#open1").click(function() { 
 
    $("#win1").show().kendoWindow({ 
 
    width: "500px", 
 
    height: "500px", 
 
    modal: true, 
 
    title: "Window 1" 
 
    }); 
 
}); 
 

 
//debugger; 
 

 
$("#open2").click(function() { 
 
    $("#win2").show().kendoWindow({ 
 
    width: "500px", 
 
    height: "500px", 
 
    modal: true, 
 
    title: "Window 2" 
 
    }).data("kendoWindow").center(); 
 
}); 
 

 
$("#close2").click(function() { 
 
    $("#win2").data("kendoWindow").close(); 
 
}); 
 

 

 
$(document).ready(function() { 
 
    $('.pai-del-menu').hide(); 
 
    var cnt = 0; 
 
    var grid = $("#grid").kendoGrid({ 
 
    dataSource: { 
 
     data: [{ 
 
     FileName: '1 Download CSV (via btoa)', 
 
     ThreeDots: 'ThreeDots1' 
 
     }, { 
 
     FileName: '2 Download CSV (via btoa)', 
 
     ThreeDots: 'ThreeDots2' 
 
     }, { 
 
     FileName: '3 Download CSV (via btoa)', 
 
     ThreeDots: 'ThreeDots3' 
 
     }, { 
 
     FileName: '4 Download CSV (via btoa)', 
 
     ThreeDots: 'ThreeDots4' 
 
     }, { 
 
     FileName: '5 Download CSV (via btoa)', 
 
     ThreeDots: 'ThreeDots4' 
 
     }], 
 
     schema: { 
 
     model: { 
 
      fields: { 
 
      FileName: { 
 
       type: "string" 
 
      }, 
 
      ThreeDots: { 
 
       type: "string" 
 
      } 
 
      } 
 
     } 
 
     }, 
 
     sort: { 
 
     field: "FileName", 
 
     dir: "asc" 
 
     }, 
 
     pageSize: 10 
 
    }, 
 
    height: 500, 
 
    scrollable: true, 
 
    sortable: true, 
 
    selectable: true, 
 
    filterable: true, 
 
    pageable: true, 
 
    columns: [{ 
 
     field: "FileName", 
 
     title: "File Name", 
 

 
     template: function csvDownload(ev) { 
 

 
     let model = { 
 
      "addedByName": "lift", 
 
      "mobileVersion": "Untitled-7.txt" 
 
     } 
 

 
     let skyCloudmageProfilePic = "mobilePicsDiplay"; 
 
     let extensionType = { 
 
      ".pdf": "pdfProfilePic", 
 
      ".ppt": "pptProfilePic", 
 
      ".xls": "xlsProfilePic", 
 
      ".xlsx": "xlsProfilePic", 
 
      ".doc": "mobilePics", 
 
      ".docx": "mobilePics", 
 
      "newDocProfilePic": "doc", 
 
      ".msg": "mailProfilePic" 
 
     }; 
 
     let lastIndex = model.mobileVersion.lastIndexOf("."); 
 

 
     skyCloudmageProfilePic = extensionType[model.mobileVersion.slice(lastIndex).toLowerCase()]; 
 
     if (typeof model.mobilePics != "undefined" && model.mobilePics != "") { 
 
      skyCloudmageProfilePic = model.mobilePics; 
 
     } 
 
     if (typeof skyCloudmageProfilePic == "undefined") { 
 
      skyCloudmageProfilePic = "newDocProfilePic"; 
 
     } 
 
     let kendotxtMenu = ""; 
 
     if (model.isTigerDoc == true) //isTigerDocUploaded 
 
     { 
 
      kendotxtMenu = "mobilePicsDiplay"; 
 
     } 
 
     if (model.isTigerDoc == true && model.TigerskyCloudD <= 0) //isTigerDocUploaded 
 
     { 
 

 
     } 
 

 
     console.log("model.mobileVersion--->" + model.mobileVersion); 
 
     // return "<span onclick=\"window.open('" + model.mobileVersion + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')\" class='" + skyCloudmageProfilePic + " displayInlineBlock " + kendotxtMenu + "'></span> <ul class='fileTypeHolder' id='fileTypeProfilePics' style='display: none;'><li class='fileTypeHolderTitle'>Tiger Document Type</li><li><span class='mobilePics displayInlineBlock' (click)='browseFileType(doc)'></span></li> <li><span class='xlsProfilePic displayInlineBlock' (click)='browseFileType('xls')'></span></li> <li><span class='pptProfilePic displayInlineBlock'(click)='browseFileType('ppt')'></span></li> <li><span class='pdfProfilePic displayInlineBlock' (click)='browseFileType('pdf')'></span></li><li><span class='newDocProfilePic displayInlineBlock' (click)='browseFileType('newdoc')'></span></li><li><span class='mailProfilePic displayInlineBlock' (click)='browseFileType('mail')'></span></li><li class='fileTypeHolderCloseBtn'> <button id='CloseBtn' class='commonBtn'>Close</button></ul>"; 
 

 

 

 
     //return "testing" + that.FinancialDocuments.ImageType(model); 
 

 
     let health = [{ 
 
      "addedByName": "player", 
 
      "mobileVersion": "sa,ple.txt" 
 
      }, 
 
      { 
 
      "addedByName": "player", 
 
      "mobileVersion": "sa,ple.pdf" 
 
      } 
 
     ] 
 

 
     var csv = "a,b,c\n1,2,3\n"; 
 
     var data = new Blob([csv]); 
 
     var a = $('<a/>', { 
 
      class: 'sportsDataPlayer', 
 
      download: 'download.csv', 
 
      type: 'text/csv', 
 
      href: URL.createObjectURL(data), 
 
      html: ev.FileName 
 
     }); 
 
     return "<span onclick=\"window.open('" + model.mobileVersion + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')\" class='" + skyCloudmageProfilePic + " displayInlineBlock " + kendotxtMenu + "'></span> <ul class='fileTypeHolder' id='fileTypeProfilePics' style='display: none;'><li class='fileTypeHolderTitle'>Tiger Document Type</li><li><span class='mobilePics displayInlineBlock' (click)='browseFileType(doc)'></span></li> <li><span class='xlsProfilePic displayInlineBlock' (click)='browseFileType('xls')'></span></li> <li><span class='pptProfilePic displayInlineBlock'(click)='browseFileType('ppt')'></span></li> <li><span class='pdfProfilePic displayInlineBlock' (click)='browseFileType('pdf')'></span></li><li><span class='newDocProfilePic displayInlineBlock' (click)='browseFileType('newdoc')'></span></li><li><span class='mailProfilePic displayInlineBlock' (click)='browseFileType('mail')'></span></li><li class='fileTypeHolderCloseBtn'> <button id='CloseBtn' class='commonBtn'>Close</button></ul>" + a[0].outerHTML; 
 
     } 
 
    }, { 
 
     field: "ThreeDots", 
 
     title: "Last Name", 
 
     template: "<span class='deleteRow'>ThreeDots</span>" 
 
    }] 
 
    }).data("kendoGrid"); 
 

 

 
    //var csv = "a,b,c\n1,2,3\n"; 
 
    //var data = new Blob([csv]); 
 
    //debugger; 
 
    //var a2 = document.getElementById("sportsDataPlayer"); 
 
    //alert("I am here"); 
 
    //a2.href = URL.createObjectURL(data); 
 

 

 
    // grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false }); 
 

 
    // Start by hiding the confirmation 
 
    $('.testingConfirmation').hide(); 
 

 
    // Create a persistent value for the window 
 
    var testingWindowVal; 
 

 
    // Listen to save button click 
 
    $("#save").click(function() { 
 
    // Set the persistent value 
 
    testingWindowVal = $("#fname").val(); 
 

 
    // Show the dialog 
 
    if (testingWindowVal) { 
 
     $('.testingConfirmation').show(); 
 
    } 
 
    }); 
 

 
    // Listen to yes from the confirmation 
 
    $('#deleteDocumentYes').click(function() { 
 
    // Update necessary things 
 
    grid.dataSource.add({ 
 
     "FileName": testingWindowVal, 
 
     "ThreeDots": "Last Name" 
 
    }); 
 
    $("#fname").val(''); 
 

 
    // Remove the value 
 
    testingWindowVal = null; 
 

 
    // Hide the dialog 
 
    $('.testingConfirmation').hide(); 
 
    }); 
 

 
    // Listen to no from the confirmation 
 
    $('#deleteDocumentNo').click(function() { 
 
    // Remove the value 
 
    testingWindowVal = null; 
 

 
    // Reset the #fname 
 
    $("#fname").val(''); 
 

 
    // Hide the dialog 
 
    $('.testingConfirmation').hide(); 
 
    }); 
 
});

.pai-del-row { 
 
    cursor: pointer; 
 
} 
 

 
.pai-del-menu { 
 
    padding: 4px; 
 
    color: #000; 
 
    border-radius: 5px; 
 
    background-color: #eee; 
 
    width: 80px; 
 
    text-align: center; 
 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); 
 
    position: fixed; 
 
    z-index: 999; 
 
    cursor: pointer; 
 
} 
 

 
a { 
 
    color: blue; 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
#runningDocumentsPopup .sports { 
 
    position: relative; 
 
} 
 

 
.sports .kPopupConfirmationBox { 
 
    display: block; 
 
    z-index: 3; 
 
    left: calc(50% - 175px); 
 
    width: 350px; 
 
    position: absolute; 
 
} 
 

 
.sports { 
 
    display: block; 
 
} 
 

 

 
/* Style for confirmation dialog */ 
 

 
.testingConfirmation { 
 
    position: fixed; 
 
    top: 25%; 
 
    margin: 0 auto; 
 
    background: white; 
 
    border: 2px solid black; 
 
    padding: 20px; 
 
    z-index: 100000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script> 
 
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet"/> 
 
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet"/> 
 
<a id="open1">Open first Window</a> 
 

 
<div id="win1" style="display:none"> 
 
    <p>First Window</p> 
 
    <input type="file" name="batchFile" id="batchFile" title="Select file" /> 
 

 
    <input type="text" name="fname" id="fname"> 
 
    <button type="button" id="save">save</button> 
 

 

 
    <br> 
 
    <br> 
 
    <br> 
 

 
    <div id="grid"></div> 
 
    <div class="pai-del-menu">Delete</div> 
 

 

 
    <div class="testingConfirmation"> 
 
    <div class="kendopobUpBox kendoWindow kPopupConfirmationBox"> 
 
     <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs"> 
 
     <div class="kendoContent">Are you sure you want to delete the selected document</div> 
 
     </div> 
 
     <div class="clearFloat"></div> 
 

 
     <div class="row kendoPopUpFooter textAligncenterImp"> 
 
     <button class="commonBtn" type="button" id="deleteDocumentYes">Yes</button> 
 
     <button class="clearBtn" type="button" id="deleteDocumentNo">No</button> 
 
     </div> 
 

 
     <div class="clearFloat"></div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="sports"> 
 
    <div class="kendopobUpBox kendoWindow kPopupConfirmationBox"> 
 
     <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs"> 
 
     <div class="kendoContent">Are you sure you want to upload file</div> 
 
     </div> 
 
     <div class="clearFloat"></div> 
 

 
     <div class="row kendoPopUpFooter textAligncenterImp"> 
 
     <button class="commonBtn" type="button" id="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button> 
 
     <button class="clearBtn" type="button" id="playerDocumentCancel" (click)="cancel()">Cancel</button> 
 
     </div> 
 
     <div class="clearFloat"></div> 
 
    </div> 
 
    </div> 
 
</div>

lien Fiddle: http://jsfiddle.net/fe5en27q/

Answer 1

Vous pouvez utiliser .map() itérer tableau health, définissez .type de Blob-"text/plain" ou "application/pdf".

let health =[{ "addedByName":"player", "mobileVersion":"sa,ple.txt" }, 
      { "addedByName":"player", "mobileVersion":"sa,ple.pdf" } 
      ]; 

let types = ["text/plain", "application/pdf"]; 

let downloads = health.map(function(version) { 
        let ext = version.mobileVersion.replace(/.*(?=\.\w+)/, ""); 
        let mimeType = types.filter(function(type) { 
            return type.indexOf(ext) > -1 
           }); 
        let data = new Blob([/* Blob data */], { 
           type: mimeType 
          }); 
        return $("<a>", { 
          "class": "sportsDataPlayer", 
          download: ev.FileName + ext, 
          type: mimeType, 
          href: URL.createObjectURL(data), 
          html: ev.FileName 
         }); 
       });