程序员经验分享-hwhale

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

2023-12-28

我的客户想要一个包含导入 CSV 数据但不托管在服务器上的网站。这个想法是为了让他们的销售人员可以展示他们的产品，而无需在他们的电脑上访问网络或设置托管。他们还可以通过从原始 Excel 文档导出新的 CSV 文件来更新数据，而无需了解 HTML 或 Javascript。

我在网上找到了很多解决方案 - 比如 Papa Parse (http://papaparse.com/ 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 文件的位置进行硬编码，以便在打开网页时自动显示数据，而无需用户进行任何进一步的交互。这可能吗？或者我忽略了一些非常基本的东西？


对非 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 http://jsbin.com/racanefi/10/edit

对文本区域内的值进行硬编码。

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

http://jsbin.com/racanefi/8/edit 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://jsbin.com/racanefi/6/edit

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

这是一个粗略的草案，您可能应该在实施之前对其进行质量检查。

编辑：我把它倒过来了 sessionStorage 是跨会话的临时存储。 localStorage 更持久。我创建了一个变量，可以让您将存储分配给var storage

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

csv

local

使用 Javascript 或 Jquery 自动导入本地 CSV 文件 的相关文章

随机推荐

  • 帮助 K&R 计算字符示例

    我正在阅读 K R 的第二版 我被这个看似简单的例子难住了 include

  • arraylist并发修改[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在用

  • 交叉连接同一个表中的 N 组行

    我有一个通用的 Dimension 和 DimensionMember 表 CREATE TABLE dbo Dimension ID int NOT NULL IDENTITY 1 1 Label nvarchar 255 CREATE

  • 如何正确访问 RefCell 中的值

    我试着把头扭过来Rc and RefCell在铁锈中 我想要实现的是对同一对象有多个可变引用 我想出了这个虚拟代码 use std rc Rc use std cell RefCell struct Person name String m

  • 权限拒绝：不允许在android中发送广播

    我创建了一个简单的相机应用程序 它在除 Android 4 4 之外的所有 Android 版本中都能正常运行 当我从相机应用程序拍照时出现以下错误 java lang SecurityException Permission Denial

  • 如何在滚动时禁用 TouchableOpacity 的突出显示效果？

  • 如何自定义颜色条

    使用这段代码 我不知道如何自定义颜色栏 关于此的色彩图webiste http matplotlib org users colormaps html不能满足我 shade m contourf Lon Lat TBB np arange

  • Android 中的 ViewPager + RecyclerView 问题

    嗨 我有Tablayout with Viewpager我正在使用Fragment用于表格布局 现在在每个 Tablayout 片段中我都有Recyclerview并显示项目 请查看我的 json 响应 http pastebin com

  • Money_format() 函数的替代方案

    我正在尝试使用money format PHP 中的函数 但出现以下错误 Fatal error Call to undefined function money format 关于此错误的搜索表明该函数money format 仅当系统有

  • 如果我需要额外的 REST API，Meteor 是一个选择吗？

    我要编写一个 Web 应用程序 它应该可以从 Web 和本机移动设备应用程序进行 CRUD 访问 对于后者 我绝对致力于 REST API 通过 Meteor com 可以实现这一点吗 是否可以选择仅将 Meteor 用于 Web 并使用第

  • Python MySQLdb 异常

    刚刚开始掌握 python 和 MySQLdb 并且想知道 在哪里放置 try catch 块来连接 MySQL 是最好的选择 在 MySQLdb connect 点 当我查询时也应该有一个吗 我应该在这些块中捕获哪些异常 谢谢你的帮助 干

  • PHP：比 strtotime 更好的日期解析器

    我正在尝试解析特定格式的字符串 但我很惊讶地发现我找不到一个好的函数来做到这一点 我发现的唯一一个是斯特托时间它不适合它guesses日期格式 我真的不相信 猜测 部分 此外 我的字符串输入是法语格式 dd mm aaaa 这似乎不太容易理

  • 如何禁用 HTML 视频播放器播放速度/三个点

    我不想在视频中显示播放速度 是否有任何控件或controlList属性来禁用该选项 例如controls disablepictureinpicture controlslist nodownload 将参数 noplaybackrate

  • C 和 C++ 标准之间有什么关系？

    我正在写这个答案 https stackoverflow com questions 5539249 why transforms begin s end s begin tolower cant be complied successfu

  • div水平居中和垂直居中[重复]

    这个问题在这里已经有答案了 我想将 div 水平居中和垂直居中对齐body一个页面的 The css loginBody width 100 height 100 margin 0 padding 0 background 999 for

  • 点网组件查看器？ [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有一个 dll 其中包含点网程序集 通用中间语言 问题是它缺乏文档 我需要弄清楚 api 比如可用的类

  • 导出为中文PDF

    我有一个包含中文的网格 当我想将数据导出为 PDF 时出现问题 似乎出现了一个奇怪的字符 下图 或类似的东西 谁能帮我解决这个问题 这里我提供一个dojo中的DEMO https dojo telerik com EJUWoNuB 找到了解

  • 如何将子域指向 Heroku 应用程序，并将根域指向另一个 Heroku 应用程序？

    我在将子域路由到 Heroku 上托管的 Wordpress 博客以及将根域路由到另一个 Heroku 应用程序时遇到问题 如果我购买了一个名为cheese com在 NameCheap 上 我想路由一个子域 例如blog cheese c

  • 尝试通用/“类型自由”时的转换问题 | ASP MVC

    Question 有没有办法在 C 中 在辅助类或其他类中 只定义一次方法 而不知道要返回哪种类型 长解释我收到以下错误 无法转换类型的对象 系统 数据 对象 ObjectQuery1 WerkStageNu Vacancies to ty

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

    我的客户想要一个包含导入 CSV 数据但不托管在服务器上的网站 这个想法是为了让他们的销售人员可以展示他们的产品 而无需在他们的电脑上访问网络或设置托管 他们还可以通过从原始 Excel 文档导出新的 CSV 文件来更新数据 而无需了解 H

热门标签