vuejs+excle开发简单网站

原创 zxsclq 随笔 前端基础 807阅读 2018-03-07 14:44:05 举报

vuejs+Excle开发简单网站

写这个题目的时候,其实,我是有点虚的,可能大家都比较懵逼,为什么不用数据库啥的?我只能说,特殊情况,特殊处理。
上周末的时候,接了一个活。客户说是,有一个工业用的led触屏的电脑,说是摆在公司门口,让客户路过的时候能看淡公司所做的项目,就一个页面,也没什么交互,我当时就像,接口,捞数据,一个前端页面,就行了。然后客户说,没有数据库,没有服务器····偶尔会加一笔项目资料。
然后我就寻思着,vuejs,读取一个json文件就行了吧,给他们定一下写json的格式,还强调里边的数组啊,对象啊,引号啥的,都必须对应!
然后客户就说,自己不懂代码,json这东西,不好弄啊,能不能换成excle。然后没办法,硬是怼了一个。故事讲完了,进入正题

首先看一下项目截图,这个项目还是用了elementui框架,不过用的是引入文件的形式,自己把对应的vuejs ,css等等下载下来。结构如图所示。

上边是项目结构,下边是数据。具体代码,用到了一个插件。把这个下载下来,然后正常引入。xlsx.full.min.js

页面代码如下:

好了,核心代码就在这里了,有不一样的需求,自己去丰富一下。至于,前端页面怎么填写,到excle表格里边,自己可以试一下。这个项目,就是,我在表格里边输入内容,然后再页面上显示。
备注:建议用谷歌或者火狐浏览器试,我没加兼容,ie好像是不行的。

有朋友说,没生效,我试了一下,应该是可以的,用谷歌浏览器会报一个本地文件的跨域错误:Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-resource。这个错误的处理方式如下:
给chrome添加启动参数:--allow-file-access-from-files
在浏览器快捷方式上右键-属性-快捷方式-目标 如下图:

然后重启一下谷歌浏览器就没问题了。

评论 ( 13 )
最新评论
15155102848 9F 2018-03-12 16:22:36 13F

忙新项目,今天刚看到,get到了 果然还是没细心!这个 会用到 get新东西

lawrence 11F 2018-03-11 12:40:14 12F

你用的哪个版本chrome?

zxsclq 10F 2018-03-09 09:22:46 11F

那你这边先用火狐试试,我这边就一个简单的例子,没有做兼容

lawrence 2018-03-09 00:04:45 10F

--allow-file-access-from-files对新版本的Chrome无效的

zxsclq 6F 2018-03-08 13:00:08 9F

~~~~你都不认真看,函数里边的this 要用that指代

var jsons = XLSX.utils.sheet_to_json(worksheet,{raw:true});

直接用that.text = jsons;就行了,你这种写法,麻烦了

15155102848 5F 2018-03-08 10:39:28 8F

15155102848 5F 2018-03-08 10:37:18 7F

填充进去 打印出来 是没有问题 有数据的 但是 怎么都遍历不出来 是为什么

15155102848 5F 2018-03-08 10:36:14 6F

我把代码 上来 你看一下 可能哪里写错了?

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>;
<script type="text/javascript" src="js/xlsx.full.min.js"></script>
</head>
<body>
<div id="example-1" v-cloak>
<ul>
<li v-for="texts in text">
{{ texts.project }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#example-1',
data(){
return {
text: ""
}
},
mounted:function(){
/this.xlsx('object.xlsx');/
this.xlsx('test.xls');
},
methods:{
xlsx(url){
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
var that = this;//这边类似于调用axios,我们需要var一个值指一下,this,函数里边不能直接用js
oReq.onload = function(e) {
var arraybuffer = oReq.response;

      var data = new Uint8Array(arraybuffer);
      var arr = new Array();
      for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
      var bstr = arr.join("");

      var workbook = XLSX.read(bstr, {type:"binary"});

      var first_sheet_name = workbook.SheetNames[0];

      var worksheet = workbook.Sheets[first_sheet_name];
        //这里能打印出,表格里边的数组,然后自己写样式摆出来就好了。
        //console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));

        var jsons = XLSX.utils.sheet_to_json(worksheet,{raw:true});

        var $items = this.items;
        $items = jsons;

/* console.log(typeof(this.items));

        for(var i=0;i<jsons.length;i++){
            return $items.append(jsons[i]);
        }

*/
console.log($items[0].adress);

      }
      oReq.send();
    }
  }
})

</script>
</body>
</html>

zxsclq 4F 2018-03-08 10:28:55 5F

应该不会啊,你看看console里边能不能打印出来,能打印出来就能处理啊

15155102848 2018-03-08 10:18:54 4F

问题:把数据填充到里面 为什么遍历不出来

zxsclq 1F 2018-03-08 09:37:53 3F

这个平台上传文件,会报错,我也不知道原因,你再试试,不信的话私信我,我发给你

zxsclq 1F 2018-03-08 09:32:14 2F

你看看是不是console里边报错了,我试了一下,没问题,你用火狐浏览器试试。谷歌浏览器请求本地文件会报错,我改一下文章

277039203 2018-03-07 19:14:25 1F

不知道哪里没对,我测试没效果。你能提供源码吗