前端页面下载文件，文件名有空格导致无法下载的问题_js a链接下载相同的文件,文件名中有空格-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43715704/article/details/104969068

在前端页面中，遇到用户反馈文件名包含空格的文件无法正常下载。通过检查代码，发现使用a标签的`href`属性时，空格未正确处理。尝试将空格替换为破折号后，文件下载正常。然而，另一个含有空格的文件却能成功下载。对比代码后，发现在第二个能正常下载的a标签中，`onclick`属性的值使用了双引号包围，从而解决了空格问题。对于js新手来说，这个问题可能不易察觉。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天客户突然艾特我说系统上有个文件无法下载，吓得我一哆嗦。赶紧上去看看，左看右看也没发现啥问题，不外乎就是文件名带有空格
这是js a标签的代码

formatter: function (cellvalue, options, rowObject) {
                if (cellvalue) {
                    var nameList = cellvalue.split(",");
                    var str = "";
                    var ppp = rowObject.PATH.split("\\");
                    str += "<a οnclick=downLoadFile('" + ppp[ppp.length - 1] + "\\\\" + rowObject.BATCHNO + '-DELIVERY.xlsx' + "') style='cursor: pointer;'>delivery.xlsx</a></br>";
                    return str;
                } else {
                    return "";
                }
            }
str解析出来/invoice/R20TZ CN BUFFER-3271/R20TZ CN BUFFER-SHIPMENT.xlsx

然后页面点击 delivery.xlsx 无任何反应。之后把文件名空格统一改成-代替就没问题了。本来结束了，但是我发现下载的另外一个文件也是带有空格的却可以下载；

formatter: function (cellvalue, options, rowObject) {
                if (cellvalue) {
                    return "<a οnclick='downLoadFileExcel(this)' fileName='" + rowObject.ERRORPATH + "' style='cursor: pointer;'>" + cellvalue + "</a>";
                } else {
                    return "";
                }
            }

function downLoadFile(str) {

    var form = $("<form>"); //定义一个form表单
    form.attr('style', 'display:none'); //在form表单中添加查询参数
    form.attr('target', 'id_iframe');
    form.attr('method', 'post');
    form.attr('action', "/leshvoice/exportInvoice");

    $('body').append(form); //将表单放置在web中

    var input1 = $('<input>');
    input1.attr('type', 'hidden');
    input1.attr('name', 'entityMap[fileName]');
    input1.attr('value', str);
    form.append(input1);

    form.submit(); //表单提交
}

对比了一下发现下面的a标签的onclick属性被’'包括了。所以之后在第一个a的 onclick用" "包括就可以下载了；

str += "<a οnclick=\"downLoadFile('" + ppp[ppp.length - 1] + "\\\\" + rowObject.BATCHNO + '-DELIVERY.xlsx' + "')\" style='cursor: pointer;'>delivery.xlsx</a></br>";

function downLoadFileExcel(str) {
    var names = new Array();
    var $a = $(str).parent().find("a");
    $.each($a, function (i, n) {
        if ($(n).text() != "x") {
            names.push($(n).attr("fileName"));
        }
    });

    var form = $("<form>"); //定义一个form表单
    form.attr('style', 'display:none'); //在form表单中添加查询参数
    form.attr('target', 'id_iframe');
    form.attr('method', 'post');
    form.attr('action', "/leshvoice/downLoadFileExcel");

    $('body').append(form); //将表单放置在web中

    var input1 = $('<input>');
    input1.attr('type', 'hidden');
    input1.attr('name', 'entityMap[fileNames]');
    input1.attr('value', names.toString());
    form.append(input1);

    form.submit(); //表单提交
}