1. 首页
  2. 问答
  3. 试图从Excel中获取信息到JS

试图从Excel中获取信息到JS

2016-09-29 22 views
-1

我做了一个货币转换器，我把所有的货币汇率都放在一个.xlsx（excel文件）中，数据自动更新和保存，所以我不能将它保存为.csv并将数据解析到脚本中。我需要知道如何从excel直接获取数据到JavaScript（我只在JavaScript中理解，所以如果你使用其他语言，我会很高兴，如果你会发送完整的代码）。试图从Excel中获取信息到JS

这是网站本身：

header 
 
{ 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    background-image: url(../images/banner-1103703_960_720.jpg); 
 
    box-shadow: 0 0 4px grey; 
 
} 
 

 
body 
 
{ 
 
margin: 0px; 
 
background-color: #6eaac4; 
 
} 
 

 
#converter 
 
{ 
 
padding-top: 230px; 
 
text-align: center; 
 

 
} 
 
#logo 
 
{ 
 
max-width: 340px; 
 
} 
 

 
#to 
 
{ 
 
    font-size: 40px; 
 
    color: firebrick; 
 
    font-family:fantasy; 
 
} 
 

 
select 
 
{ 
 
    width: 300px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    border-radius: 15px; 
 
    background-color:lightblue; 
 
    font-size: 20px; 
 
} 
 

 
article 
 
{ 
 
    background-color: chartreuse; 
 
     border-radius: 50px; 
 
    border-color: black; 
 
    width: 340px; 
 
    height: auto; 
 
} 
 

 
button 
 
{ 
 
    /* Green */ 
 
    background-color:whitesmoke; 
 
    background-repeat:no-repeat; 
 
    border: 4px; 
 
    cursor:pointer; 
 
    overflow: hidden; 
 
    border-radius: 30px; 
 
    outline:none; 
 
    color: firebrick; 
 
    text-align: center; 
 
    font-family: fantasy; 
 
    letter-spacing: 5px; 
 
    text-decoration: none; 
 
    font-size: 50px; 
 
} 
 

 
input 
 
{ 
 
    background-color: lightblue; 
 
    border-radius: 15px; 
 
    width: 200px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    border-width: 1px; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    
 
    
 
} 
 

 
iframe 
 
{ 
 
    display: none; 
 
}
<!DOCTYPE html> 
 
<html manifest="offline.manifest"> 
 
<head> 
 
<meta name="viewport" content="width=device-width" /> 
 
<link rel="stylesheet" href="design/style.css"> 
 
<link rel="icon" href="images/icon.ico"> 
 
<title>Vertycon</title> 
 
    <script src="jquery-3.1.0.min.js" ></script> 
 
</head> 
 
<body onload=""> 
 
<header> 
 
<center><a href="index.html"> 
 
<img id="logo" src="images/LOGO.png" height="170px" width="340px"> 
 
</a></center> </header> 
 
    <div id="converter"> 
 
     <center> <article><br> 
 
      <input type="number" name="amount" placeholder="Amount" id="amount"/> 
 
      <br><br> 
 
      <select id="From"> 
 
      <option value="Display">Convert From..</option> 
 
      <option value="US Dollar">US Dollar</option> 
 
      <option value="ARS"> Argentine Peso</option> 
 
      <option value="AUD">Australian Dollar</option> 
 
      <option value="BHD">Bahraini Dinar</option> 
 
      <option value="BWP">Botswana Pula</option> 
 
      <option value="BRL">Brazilian Real</option> 
 
      <option value="BND">Bruneian Dollar</option> 
 
      <option value="BGN">Bulgarian Lev</option> 
 
      <option value="CAD">Canadian Dollar</option> 
 
      <option value="CLP">Chilean Peso</option> 
 
      <option value="CNY">Chinese Yuan Renminbi</option> 
 
      <option value="COP">Colombian Peso</option> 
 
      <option value="HRK">Croatian Kuna</option> 
 
      <option value="CZK">Czech Koruna</option> 
 
      <option value="DKK">Danish Krone</option> 
 
      <option value="EUR">Euro</option> 
 
      <option value="HKD">Hong Kong Dollar</option> 
 
      <option value="HUF">Hungarian Forint</option> 
 
      <option value="ISK">Icelandic Krona</option> 
 
      <option value="INR">Indian Rupee</option> 
 
      <option value="IDR">Indonesian Rupiah</option> 
 
      <option value="IRR">Iranian Rial</option> 
 
      <option value="ILS">Israeli Shekel</option> 
 
      <option value="JPY">Japanese Yen</option> 
 
      <option value="KZT">Kazakhstani Tenge</option> 
 
      <option value="KRW">South Korean Won</option> 
 
      <option value="KWD">Kuwaiti Dinar</option> 
 
      <option value="LYD">Libyan Dinar</option> 
 
      <option value="MYR">Malaysian Ringgit</option> 
 
      <option value="MUR">Mauritian Rupee</option> 
 
      <option value="MXN">Mexican Peso</option> 
 
      <option value="NPR">Nepalese Rupee</option> 
 
      <option value="NZD">New Zealand Dollar</option> 
 
      <option value="NOK">Norwegian Krone</option> 
 
      <option value="OMR">Omani Rial</option> 
 
      <option value="PKR">Pakistani Rupee</option> 
 
      <option value="JPY">Philippine Peso</option> 
 
      <option value="PLN">Polish Zloty</option> 
 
      <option value="QAR">Qatari Riyal</option> 
 
      <option value="RON">Romanian New Leu</option> 
 
      <option value="RUB">Russian Ruble</option> 
 
      <option value="SAR">Saudi Arabian Riyal</option> 
 
      <option value="SGD">Singapore Dollar</option> 
 
      <option value="ZAR">South African Rand</option> 
 
      <option value="LKR">Sri Lankan Rupee</option> 
 
      <option value="SEK">Swedish Krona</option> 
 
      <option value="CHF">Swiss Franc</option> 
 
      <option value="TWD">Taiwan New Dollar</option> 
 
      <option value="THB">Thai Baht</option> 
 
      <option value="TTD">Trinidadian Dollar</option> 
 
      <option value="TRY">Turkish Lira</option> 
 
      <option value="AED">Emirati Dirham</option> 
 
      <option value="GBP">British Pound</option> 
 
      <option value="VEF">Venezuelan Bolivar</option> 
 
        </select> 
 
     <div id="to"> &nbsp;To&nbsp;</div> 
 
    <select id="To"> 
 
      <option value="Display">Convert To..</option> 
 
      <option value="USD">US Dollar</option> 
 
      <option value="ARS"> Argentine Peso</option> 
 
      <option value="AUD">Australian Dollar</option> 
 
      <option value="BHD">Bahraini Dinar</option> 
 
      <option value="BWP">Botswana Pula</option> 
 
      <option value="BRL">Brazilian Real</option> 
 
      <option value="BND">Bruneian Dollar</option> 
 
      <option value="BGN">Bulgarian Lev</option> 
 
      <option value="CAD">Canadian Dollar</option> 
 
      <option value="CLP">Chilean Peso</option> 
 
      <option value="CNY">Chinese Yuan Renminbi</option> 
 
      <option value="COP">Colombian Peso</option> 
 
      <option value="HRK">Croatian Kuna</option> 
 
      <option value="CZK">Czech Koruna</option> 
 
      <option value="DKK">Danish Krone</option> 
 
      <option value="EUR">Euro</option> 
 
      <option value="HKD">Hong Kong Dollar</option> 
 
      <option value="HUF">Hungarian Forint</option> 
 
      <option value="ISK">Icelandic Krona</option> 
 
      <option value="INR">Indian Rupee</option> 
 
      <option value="IDR">Indonesian Rupiah</option> 
 
      <option value="IRR">Iranian Rial</option> 
 
      <option value="ILS">Israeli Shekel</option> 
 
      <option value="JPY">Japanese Yen</option> 
 
      <option value="KZT">Kazakhstani Tenge</option> 
 
      <option value="KRW">South Korean Won</option> 
 
      <option value="KWD">Kuwaiti Dinar</option> 
 
      <option value="LYD">Libyan Dinar</option> 
 
      <option value="MYR">Malaysian Ringgit</option> 
 
      <option value="MUR">Mauritian Rupee</option> 
 
      <option value="MXN">Mexican Peso</option> 
 
      <option value="NPR">Nepalese Rupee</option> 
 
      <option value="NZD">New Zealand Dollar</option> 
 
      <option value="NOK">Norwegian Krone</option> 
 
      <option value="OMR">Omani Rial</option> 
 
      <option value="PKR">Pakistani Rupee</option> 
 
      <option value="JPY">Philippine Peso</option> 
 
      <option value="PLN">Polish Zloty</option> 
 
      <option value="QAR">Qatari Riyal</option> 
 
      <option value="RON">Romanian New Leu</option> 
 
      <option value="RUB">Russian Ruble</option> 
 
      <option value="SAR">Saudi Arabian Riyal</option> 
 
      <option value="SGD">Singapore Dollar</option> 
 
      <option value="ZAR">South African Rand</option> 
 
      <option value="LKR">Sri Lankan Rupee</option> 
 
      <option value="SEK">Swedish Krona</option> 
 
      <option value="CHF">Swiss Franc</option> 
 
      <option value="TWD">Taiwan New Dollar</option> 
 
      <option value="THB">Thai Baht</option> 
 
      <option value="TTD">Trinidadian Dollar</option> 
 
      <option value="TRY">Turkish Lira</option> 
 
      <option value="AED">Emirati Dirham</option> 
 
      <option value="GBP">British Pound</option> 
 
      <option value="VEF">Venezuelan Bolivar</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
     <button type="submit" id="submit" onclick="Vars; Alert();">Convert!</button> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
      </article></center> 
 
    </div> 
 
    <iframe src="https://onedrive.live.com/embed?cid=BE27105A8171337A&resid=BE27105A8171337A%211291&authkey=ALjfySLkSxTD7MU&em=2" width="402" height="346" frameborder="0" scrolling="no" id="ifrm"></iframe> 
 
    
 
    <script> 
 
function Vars(){ 
 
var select1 = document.getElementById('From'); 
 
    var From = (select1.options[select.selectedIndex]); 
 
    var select2 = document.getElementById('To'); 
 
    var To = (select2.options[select.selectedIndex]); 
 
} 
 
     function Alert(){ 
 
      alert(From.value+To.value) 
 
      alert(document.getElementById('amount').value) 
 
     } 
 
    </script> 
 
    
 
    
 

 
</body> 
 
</html>

，这是Excel文件：

the excel file

从先感谢， LOVE U家伙

来源

2016-09-29 mastercoder

+0

哪里是你的Excel文件从获取数据？它必须是某种API。使用js直接打这个API可能比试图从excel电子表格中工作要容易得多 – jgozal

回答

0

有许多库可以实现这一点。我用于我公司的那个是SheetJS。

编辑：添加一个例子。这是一个实用函数的简化版本，它接受一个文件和一组属性，将Excel数据表中的数据解析为更有用的形式。

var REGEX = { 'regexExcel': /^.+\.(xlsx?)$/i, 'regexExcelWithOds: /^.+\.((?:xlsx?)|(?:ods))$/i }; 

/** 
* Converts an excel column letter (e.g. R, AZ) to an associated integer 
* value so that it can be used as an iterator 
**/ 
function excelColumnToInt (index) 
{ 
    var multiplier = 1, value = 0; 

    for (var iterator = (index.length - 1); iterator >= 0; iterator--) 
    { 
    if (multiplier === 1) 
    { 
     //'A' is 65 in ASCII. It equates to 0 for our purposes. 
     value += (index.charCodeAt (iterator) - 65); 
    } 
    else 
    { 
     value += (index.charCodeAt (iterator) - 64) * multiplier; 
    } 

    multiplier *= 26; 
    } 

    return value; 
} 

/** 
* Retrieves the letter of the column associated with the given field name 
**/ 
function excelGetColumnForProperty (worksheet, fieldName, bounds) 
{ 
    var column; 

    for (var count = bounds[0].c; count <= bounds[1].c; count++) 
    { 
    column = excelIntToColumn(count); 

    try 
    { 
     if (worksheet[column + bounds[0].r].v.trim().toLowerCase() === fieldName.toLowerCase()) 
     { 
     return column; 
     } 
    } 
    catch (exception) 
    { 
     continue; 
    } 
    } 

    return null; 
} 

/** 
* Validates a given excel document against its given fields, then feeds the 
* result to the given callback function 
**/ 
function importFromExcel (filepicker, properties, callback) 
{ 
    var processing = true; 

    var files = $(filepicker)[0].files; 

    if (!files.length) 
    { 
    //Raise error notification here 

    processing = false; 

    return; 
    } 

    if (!properties || !properties.length) 
    { 
    processing = false; 

    return; 
    } 

    var errorMessage; 
    var errorList = [], itemSet = []; 
    var workbook, extensionCheck; 
    var reader = new FileReader(); 

    //Handler is created before iterating through the files 
    reader.onload = function (event) 
    { 
    try 
    { 
     switch (extensionCheck[1]) 
     { 
     case 'xls': 
      workbook = XLS.read (event.target.result, {type: 'binary'}); 

      break; 
     case 'ods': 
      //NOTE: Has some issues with parsing sparse sheets 
      workbook = XLSX.read (event.target.result, {type: 'binary'}); 

      break; 
     default: 
      workbook = XLSX.read (event.target.result, {type: 'binary'}); 
     } 
    } 
    catch (exception) 
    { 
     //Raise error notification here 

     processing = false; 

     return; 
    } 

    var sheet, ref, bounds, tmp, count, match; 

    workbook.SheetNames.forEach (function (sheetname, sheetIndex) 
    { 
     sheet = workbook.Sheets[sheetname]; 

     //Skip empty worksheets 
     if (!sheet['!ref']) { return; } 

     //Format: A1:ZZ99 
     ref = sheet['!ref'].split (':'); 
     bounds = []; 

     //Low bound 
     tmp = ref[0].match (/^([A-Z]+)([0-9]+)$/); 
     bounds[0] = {c: excelColumnToInt (tmp[1]), r: parseInt(tmp[2])}; 

     //High bound 
     tmp = ref[1].match (/^([A-Z]+)([0-9]+)$/); 
     bounds[1] = {c: excelColumnToInt (tmp[1]), r: parseInt(tmp[2])}; 

     //Cycle through the last row. If content is not found, reduce the 
     //bound and try the next row up 
     var checkingBounds = true; 

     while (checkingBounds) 
     { 
     for (count = 0; count < bounds[1].c; count++) 
     { 
      try 
      { 
      if (!!sheet[excelIntToColumn (count) + bounds[1].r].w) 
      { 
       checkingBounds = false; 
       bounds[1].r++; 
       break; 
      } 
      } 
      catch (exception) 
      { 
      //Fail silently 
      } 
     } 

     bounds[1].r--; 
     } 

     //Find the column associated with each property 
     properties.forEach (function (property, propertyIndex) 
     { 
     property.column = excelGetColumnForProperty (sheet, property.name, bounds); 

     //Column with the given name not found 
     if (!property.column) 
     { 
      errorList.push ('Could not find a column corresponding to <strong>' + property.name + '</strong> on <strong>' + sheetname + '</strong>'); 
     } 
     }); 

     if (!!errorList.length) { return; } 

     //Retrieve product data 
     var itemObj; 
     var rowValid = true; 

     for (count = (bounds[0].r + 1); count <= bounds[1].r; count++) 
     { 
     itemObj = {}; 
     rowValid = true; 

     properties.forEach (function (property, propertyIndex) 
     { 
      try 
      { 
      if (property.required && sheet[property.column + count] === undefined) 
      { 
       throw 'Required property missing'; 
      } 

      //Define custom handlers based on expected inputs 
      switch (property.handler) 
      { 
       case 'myHandler': 

       break; 
       default: 
       itemObj[property.field] = sheet[property.column + count].v; 
      } 
      } 
      catch (exception) 
      { 
      //Guard in case the flattened sheet is missing an index associated with an optional value 
      if (exception === 'Required property missing' && property.required) 
      { 
       errorList.push ('Could not find a value for <strong>' + property.name + '</strong> on <strong>' + sheetname + '</strong> at <strong>row ' + count + '</strong>. This is a required field.'); 
       rowValid = false; 
      } 
      } 
     }); 

     if (rowValid) 
     { 
      itemSet.push (itemObj); 
     } 
     } 
    }); 

    if (!!errorList.length) 
    { 
     errorMessage = '<p>The system encountered issues when trying to read your file. Please fix these problems before proceeding.</p><ul>'; 

     errorList.forEach (function (error, index) 
     { 
     errorMessage += '<li>' + error + '</li>'; 
     }); 

     errorMessage += '</ul>'; 

     //Notify user of the errors you encountered here 

     processing = false; 
    } 
    else 
    { 
     callback (itemSet); 
    } 
    }; 

    var count, file; 

    //Note: Only one file is supported at this time, but the structure 
    //  for handling multiple files is the same. Support for multiple 
    //  files results in a fairly complicated synchronization model. 
    for (count = 0; count < files.length; count++) 
    { 
    file = files[count]; 

    extensionCheck = file.name.match (REGEX.regexExcel); 

    if (!extensionCheck) 
    { 
     //ODS files don't seem to parse correctly 
     errorList.push ('The file ' + file.name + ' is invalid. Please provide a .xls or a .xlsx file.'); 

     continue; 
    } 

    reader.readAsBinaryString (file); 
    } 

    if (!!errorList.length) 
    { 
    errorMessage = '<p>The system encountered issues when trying to read your file. Please fix these problems before proceeding.</p><ul>'; 

    errorList.forEach (function (error, index) 
    { 
     errorMessage += '<li>' + error + '</li>'; 
    }); 

    errorMessage += '</ul>'; 

    //Notify user of parsing errors here 

    processing = false; 
    } 
}

实例应用：

importFromExcel ('#myFilePicker', 
       [ 
        {field: 'name', name: 'Name', handler: 'assignment', required: true}, 
        {field: 'is_taxed', name: 'Taxable (Y/N)', handler: 'boolean', required: false} 
       ], 
       function (results) 
       { 
        //Handle the response here 
       });

来源

2016-09-29 19:14:03

+0

你能解释一下如何使用它吗？ – mastercoder

+0

其实它并不重要，我试图使用这个和数据不会出现。我认为这是因为文档中的网页数据。 – mastercoder

+0

添加了一个相当全面的例子。主要限制是列标题必须位于电子表格的第一行，但它们可以按任意顺序排列，并且每个列都可以赋予唯一的处理程序。 –

相关问题

 相关问题