实现简单的csv文件上传和bootstrap表格的下载

一、写一个简单的页面并发送文件

　　引入bootstrap.js，jQuery.js等，具体的网页就不细写了，很简单。

　　加入input框，button控件，进度条。如下：

 <li class="list-group-item" id="input-file-group">

    <div class="input-group mb-3">

    <!-- 上传.csv文件 -->

        <input type="file" class="form-control" id="inputGroupFile" aria-describedby="inputGroupFileAddon" aria-label="Upload" accept=".csv">

        <button class="btn btn-default btn-outline-secondary" type="button" id="inputGroupFileAddon" onclick="submitUpload()">确认提交</button>

        <br>

        <!-- 进度条 -->

        <div class="progress" style="width: 500px; margin: 15px 10px">

            <div class="progress-bar progress-bar-striped active" id="progress-bar"></div>

        </div>

    </div>

</li>

　　编写点击事件

　　　　获取文件

 var orderFile =document.querySelector('#inputGroupFile').files;

　　　　创建formdata对象并添加文件

var fd=new FormData();

fd.append('avatar',orderFile[0]);

　　　　使用Ajax发送文件并实现进度条

$.ajax({

            type: "POST",

            url: "",

            data: fd,

            processData: false,

            contentType: false,

            error: function (data) {

                setTimeout(function(){

                    alert("文件上传失败");

                },50);

            },

            success: function (data) {

                setTimeout(function(){

                    alert("文件上传成功");

                    },1000);

            },

            xhr: function () {

                myXhr = $.ajaxSettings.xhr();

                if (myXhr.upload) {

                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);

                }

                return myXhr;

            }

});

function progressHandlingFunction(event) {

var loaded = Math.floor(100 * (event.loaded / event.total));

$("#progress-bar").html(loaded + "%").css("width", loaded + "%");

}

　　实现的效果如下所示：

二、Multer中间件解析上传文件

　　先引入multer

const multer = require('multer');

router.post('', multer().single('avatar'), (req, res) => {

    let { buffer, mimetype } = req.file;

    var tempString = buffer.toString('utf8');

});

　　这里，buffer的内容就是十六进制的文件信息，mimetype是文件格式text/csv

　　转换成utf-8编码后就可以使用了。

三、bootstrap表格的下载

　　提一下bootstrap表格的实现：

　　引入bootstrap-table插件

<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/locale/bootstrap-table-zh-CN.min.js"></script>

　　版本要对应上

　　使用的代码：　

$('#searchResultTable').bootstrapTable({

    method:'get',

    url:'',

    pageNumber : 1,

    pagination : true,

    sidePagination : 'client',

    pageSize : 4,

    pageList : [ 5, 10, 20, 30 ],

    queryParams : function(params) {

    var a=111;

    };

columns: [{

title: '订单编号',

field: 'orderID',

},{

title: '订单类型',

field: 'orderType',

}]

});

　　这里 router要发送一个符合上述行的json数据

　　建议用如下方式

res.json(aaa）;

　　如下所示：

[

  {

    orderID: '28435647',

    orderType: '0'

  },

  {

    orderID: '50404380',

    orderType: '0'

  }

]

　　效果如下：

　　现在，使用bootstrap-table-export插件实现bootstrap的导出

　　加入依赖（按顺序），和上面有些重复的

<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>

<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>

<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/locale/bootstrap-table-zh-CN.min.js"></script>

<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/export/bootstrap-table-export.min.js"></script>

　　在之前的bootstrap表格的js代码中加入如下一行：

showExport:true,

　　会出现如下按钮：

　　点击对应的格式就可以导出相应文件。

　　如果出现问题，一般就是bootstrap、jQuery、bootstrap-table、bootstrap-table-export、tableExport的版本对应不上，选择合适的版本就行。

参考文章：

https://blog.csdn.net/m0_53620413/article/details/121126046

https://blog.csdn.net/qq_45859670/article/details/123306590

https://www.jianshu.com/p/9cc6c903c4b6

巴特西

实现简单的csv文件上传和bootstrap表格的下载

最新文章

热门文章