Question

我的客户想要一个网站，其中包括导入CSV数据而不是托管在服务器上。这样的想法是，他们的销售人员可以展示他们的产品，而无需在他们的PC上设置Web访问或托管。他们还可以通过从原始Excel文档导出新的CSV文件来更新数据，而无需任何HTML或Javascript知识。

我在网上找到了不少解决方案 - 比如Papa Parse（http://papaparse.com/），但所有这些解决方案都要求用户使用<input type="file" />选择文件。例如，使用Papa Parse的以下脚本运行得非常好：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test CSV</title>
</head>
<body>
  <input type="file" />
</body>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.parse.min.js"></script>
<script language="javascript">
  $('input').change(function(e) {
    $('input[type=file]').parse({
        complete: function(data) {
            console.log('Parse results:', data.results);
        }
    });
});
</script>
</html>

我的问题是我需要能够对CSV文件的位置进行硬编码，以便在打开网页时自动显示数据，而无需用户进行任何进一步的交互。这可能吗？或者我忽略了一些非常基本的东西？

Answer 1

对非javascript type的脚本标记内的值进行硬编码，例如text/csv，然后使用innerHTML或$("#unparsed").html()

提取它

<script type="text/csv" id="unparsed">
    url,title,size
    images/address-book.png?1354486198, Address Book, 1904 KB
    images/front-row.png?1354486198, Front Row, 401 KB
    images/google-pokemon.png?1354486198, Google Pokémon, 12875 KB
    ...
</script>

$(function parseData(){
    $("#file").hide();
    var data = $("#unparsed").html();
    var parsed = $.parse(data);
    $("#parsed").val(JSON.stringify(parsed));
})

http://jsbin.com/racanefi/10/edit

对textarea中的值进行硬编码。

$(function parseData(){
  $("#file").hide();
  var data = $("#unparsed").val();
  var parsed = $.parse(data);
  $("#parsed").val(JSON.stringify(parsed));
})

http://jsbin.com/racanefi/8/edit

OR

将值存储在localStorage中。

var storage = localStorage;
var key = 'unparsed_text_file';

function getFile(){
$("#file").change(function(){
  var file = $(this).eq(0)[0].files[0],
    reader = new FileReader();
    reader.onload = function(e) {
      var text = reader.result;
      storage.setItem(key,text);
      parseData();
    };
    reader.readAsText(file);
});
}

function parseData(){
  $("#file").hide();
  var data = storage.getItem(key);
  var parsed = $.parse(data);
  $("#unparsed").val(data);
  $("#parsed").val(JSON.stringify(parsed));
}

if(storage.getItem(key))
  parseData();
else
  getFile();

http://jsbin.com/racanefi/6/edit

浏览器兼容性： http://caniuse.com/namevalue-storage

这是草稿，你应该在实施之前做好准备。

编辑：我向后调试sessionStorage是临时会话。 localStorage更加永久。我创建了一个变量，可让您将存储分配到var storage

Answer 2

PapaParse是高质量的东西，但为了完成起见，它是如何完成的jquery-csv

＆＃13;

<html>
<head>
<meta charset="utf-8" />
<title>Demo - CSV-to-Table</title>
</head>

<body>
  <div id="inputs" class="clearfix">
    <input type="file" id="files" name="files[]" multiple />
  </div>
  <hr />
  <output id="list">
  </output>
  <hr />
  <table id="contents" style="width:100%; height:400px;" border>
  </table>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.js"></script>
  <script>
    $(document).ready(function() {
      if(isAPIAvailable()) {
        $('#files').bind('change', handleFileSelect);
      }
    });

    function isAPIAvailable() {
      // Check for the various File API support.
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
        return true;
      } else {
        // source: File API availability - http://caniuse.com/#feat=fileapi
        // source: <output> availability - http://html5doctor.com/the-output-element/
        document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
        // 6.0 File API & 13.0 <output>
        document.writeln(' - Google Chrome: 13.0 or later<br />');
        // 3.6 File API & 6.0 <output>
        document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
        // 10.0 File API & 10.0 <output>
        document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
        // ? File API & 5.1 <output>
        document.writeln(' - Safari: Not supported<br />');
        // ? File API & 9.2 <output>
        document.writeln(' - Opera: Not supported');
        return false;
      }
    }

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var file = files[0];

      // read the file metadata
      var output = ''
          output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
          output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
          output += ' - FileSize: ' + file.size + ' bytes<br />\n';
          output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';

      // read the file contents
      printTable(file);

      // post the results
      $('#list').append(output);
    }

    function printTable(file) {
      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function(event){
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        var html = '';
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
        $('#contents').html(html);
      };
      reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
    }
  </script>
</body>
</html>

＆＃13;

功能检测（即哪些浏览器无法正常工作）是内置的，文件必须通过文件对话框加载，因为沙箱保护阻止脚本直接访问文件系统。

免责声明：我是jquery-csv的作者。

使用Javascript或Jquery自动导入本地CSV文件

2 个答案: