前端 Vue.js+excle开发简单网站

前端页面开发步骤 学前端开发需要美术功底吗 前端还是开发者

vuejs+Excle开发简单网站

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

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

页面代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
    <meta charset=”UTF-8″>
    <!– 引入样式 –>
    <link rel=”stylesheet” href=”./css/style.css”>
    <link rel=”stylesheet” href=”./css/index.css”>
</head>
<body>
    <div id=”app” v-cloak>
    </div>
</body>
<!– 先引入 vue –>
<script src=”./js/vue.js”></script>
<!– 引入组件库 –>
<script src=”./js/index.js”></script>
<!– <script src=”./js/axios.min.js”></script> –>
<script src=”./js/xlsx.full.min.js”></script>
<script>
    new vue({
        el: ‘#app’,
        data() {
            return {
            }
        },
        mounted: function () {
            this.xlsx(‘object.xlsx’);
        },
        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 }));
                }
                oReq.send();
            }
        }
    })
</script>
</html>

好了,核心代码就在这里了,有不一样的需求,自己去丰富一下。至于,前端页面怎么填写,到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
在浏览器快捷方式上右键-属性-快捷方式-目标;

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

前端开发一般需要多久 开发前端好还是后端 前端开发必备的一些软件

» 本文来自:前端开发者 » 《前端 Vue.js+excle开发简单网站》
» 本文链接地址:https://www.rokub.com/5346.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!