2

实现简单的csv文件上传和bootstrap表格的下载 - 福元路小佩奇

 1 year ago
source link: https://www.cnblogs.com/Peggy114514/p/17028679.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

实现简单的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 + "%");

　　实现的效果如下所示：

3025759-20230105184613488-2107716937.png
3025759-20230105185250042-990458658.png

 二、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

3025759-20230105185329197-495791002.png

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

3025759-20230105185348563-2091029808.png

 三、bootstrap表格的下载

　　提一下bootstrap表格的实现：

　　引入bootstrap-table插件

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/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'
  }
]

　　效果如下：

3025759-20230105191410424-1571367968.png

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

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

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>

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

showExport:true,

　　会出现如下按钮：

3025759-20230105191514402-23997039.png

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

　　如果出现问题，一般就是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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK