Ajax导出文件

最新推荐文章于 2024-06-07 16:07:22 发布

phacxj

最新推荐文章于 2024-06-07 16:07:22 发布

阅读量4.1k

点赞数 1

分类专栏：前端文章标签： AJAX导出前端 BLOB

本文链接：https://blog.csdn.net/weixin_42370825/article/details/87537319

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax导出文件

文件导出方式

文件导出方式

前言：

因为在项目中涉及到了数据导出的问题，于是想通过Ajax请求后端，通过Response返回流的形式来实现文件的导出功能…
由于原生的Ajax支持的数据返回类型dataType类型有三种：text，json，xml，不能返回流，所以无法实现【文件导出】功能。于是只能通过Form表单提交的方式进行导出，虽然看起来笨拙了些，但是效果还是很好的…，但是后来又碰到了一个坑爹的情况，业务需求是在上传的同时实现导出，而我们使用的上传插件是Dropzone，这个插件的上传请求和AJAX一样，都是不支持【流】的形式返回数据。所以form表单提交的方式再用来就很蛋疼了。在经过研究之后，发现可以通过BASE64转码和BLOB来实现文件的导出。具体如下

1.BASE64配合BLOB实现（不需要使用form表单）

	思路：既然AJAX不能返回【流】，那么就把【流】转成字符串，再在前端进行处理，反正数据没有丢失，肯定是可以下载的。前端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
</head>
<body>
<div style="text-align: center">
    <button type="button" class="btn btn-success" onclick="ajaxExportFileTest(this)">ajax导出文件测试</button>
</div>
<script type="text/javascript">

    /**
     * AJAX导出文件测试
     * @param obj
     */
    function ajaxExportFileTest(obj) {
        $.ajax({
           url : "ajaxExportFileTest",
           type : "post",
           success : function (result) {
               if (result){
                   let filename = "ceshi.xlsx";
                   let blob = getBlob(result,{type: "application/vnd.ms-excel"});
                   let isDown = true;
                   let url = downloadBlob(filename,blob,isDown);
                   console.log(url);
               }
           }
        });

    }

    /**
     * 获取Blob
     * @param base64 base64字符串
     * @param contentType 导出格式 MIME 类型
     * @param sliceSize 分割大小
     * @returns {Blob}
     */
    function getBlob(base64, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        let byteCharacters = atob(base64);
        let byteArrays = [];

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            let slice = byteCharacters.slice(offset, offset + sliceSize);

            let byteNumbers = new Array(slice.length);
            for (let i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            let byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

        return new Blob(byteArrays, {type: contentType});
    }

    /**
     * 下载文件
     * @param fileName 文件名
     * @param blob BLOB对象
     * @param isDown 是否下载，默认不下载
     * @returns {string} 返回url
     */
    function downloadBlob(fileName, blob,isDown){
        //默认不下载，返回url
        //判断是直接下载还是返回对应的URL
        let url = URL.createObjectURL(blob);
        if (isDown){
            //如果是直接下载,利用a标签来实现下载
            let docEle = document;
            let link = docEle.createElement("a");
            link.innerHTML = fileName;
            link.download = fileName;
            link.href = url;
            docEle.getElementsByTagName("body")[0].appendChild(link);
            link.click();
            $(link).remove();
        }
        return url;
    }


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

后端代码如下：

@Service
public class TestService {

    /**
     * 根据byte 数组获取BASE64字符串
     * @param bytes
     * @return
     */
    public String getFileBase64Str(byte [] bytes){
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encodeBuffer(bytes);
    }

    /**
     * 创建一个Excel 转换成BASE64字符串，返回出去
     * @return
     */
    public  String exportExcelFileBase64Str(){
        //创建workbook对象
        SXSSFWorkbook workbook = new SXSSFWorkbook(100);
        SXSSFSheet sheet = workbook.createSheet();
        SXSSFRow titleRow = sheet.createRow(0);
        titleRow.createCell(0).setCellValue(111);
        titleRow.createCell(1).setCellValue(222);
        titleRow.createCell(2).setCellValue(333);
        titleRow.createCell(3).setCellValue(444);
        titleRow.createCell(4).setCellValue(555);
        //创建输出流
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        try {
            workbook.write(output);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return getFileBase64Str(output.toByteArray());
    }

}

/**
 * @author phacxj
 */
@Controller
public class TestController {

    @Autowired
    TestService testService;

    @PostMapping("ajaxExportFileTest")
    @ResponseBody
    public String ajaxExportFileTest(){
        return testService.exportExcelFileBase64Str();
    }

2.form表单提交的方式处理（简单，适用性略差）

思路：这种方式导出数据很简单，但是不能很好的监听导出（但可以通过COOKIE设置判断进行监听）

$("<form action='url' method='post' style='display: none'></form>").appendTo('body').submit().remove();

总结

在简单的导出，不需要ajax和监听文件是否导出的情况下，可以使用第二种。如果必须要ajax，或者使用类似Dropzone上传的时候导出，第一种就配上用场了。

phacxj

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax导出文件

Ajax导出文件文件导出方式前言：1.BASE64配合BLOB实现（不需要使用form表单）form表单提交的方式处理（简单，适用性略差）总结文件导出方式前言：因为在项目中涉及到了数据导出的问题，于是想通过Ajax请求后端，通过Response返回流的形式来实现文件的导出功能…由于原生的Ajax支持的数据返回类型dataType类型有三种：text，json，xml，不能返回流，所以无法实...
复制链接

扫一扫