通过硬编码csv文件的值来实现下载功能

Question

我通过对csv文件的值进行硬编码来实现download功能，但是现在我在health数组中获得了更多具有不同文档的值。其中，一个文档是pdf，另一个是txt。

如果health[0].mobileVersion是pdf，我需要将文档下载为pdf。同样，如果health[0].mobileVersion是txt，我需要将文档下载为txt。

你能告诉我如何解决它。

我的代码如下。

＆＃13;

＆＃13;

$("#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();
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

小提琴链接：http://jsfiddle.net/fe5en27q/

Answer 1

您可以使用.map()来迭代health数组，将.type的{​​{1}}设置为Blob或"text/plain"。

"application/pdf"