Question

我想为我在浏览器中使用Javascript生成的CSV提供下载链接。数据URI是一个显而易见的选择，但它们在IE中不适用于CSV。

问题＃1：是否有任何跨浏览器的方式完全在客户端执行此操作？

我很确定答案是否定的。下一种方法是生成一个类似/data_download?data=...的链接，并且具有相应的服务器端资源，该资源只响应来自查询字符串的data字段的内容。问题现在似乎是IE的最大URL长度约为2 KB，我不想在我的系统中构建该限制。

所以我创建了一个服务器端资源，以便我可以使用表单数据POST到/data_download，其中'data'属性是CSV内容，并且它使用表单的'data'字段进行响应。这看起来很有效，但是这很麻烦b / c我需要在客户端标记中有<form>，即使我正确设置了mimetype，我也会在浏览器中收到警告我认为这会在某些浏览器中破解：

资源解释为文档但使用MIME类型text / csv传输：“http：// localhost：8001 / data_download”

问题2：有没有更好的方法可以做到这一点具有以下部分或全部特征：

无国籍：我不是要在服务器上创建令牌或任何需要在请求之间存储状态的东西
使用GET请求：这样我就可以拥有<link>代码，而不是整个<form>

Answer 1

看看http://tshrestha.blogspot.com/2013/05/stupid-download-of-browser-self.html 带有文件名的数据uri（锚元素的下载属性）由FF20 +和Chrome支持。

你可以通过以下方式让它在IE中完全在客户端工作：

if(/MSIE/.test(navigator.userAgent) && document.execCommand) {
    var oWin = window.open("about:blank", "_blank");
    oWin.document.write("your text goes here");
    oWin.document.close();
    var success = oWin.document.execCommand('SaveAs', true)
    oWin.close();
    return false; //do NOT follow the link
}

问题是用户必须提供文件名+ .csv或其他任何扩展名。： - （

Answer 2

虽然问题要求某些IE兼容性，但问题标题中没有这个问题，所以我会为那些在Google上搜索的人发布此解决方案。这是我的解决方案，将一个表转换为客户端的csv，给出一个下载按钮。可以与Ustaman的解决方案结合使用，制作出完全跨浏览的解决方案。

HTML：

public class CustomObject {
    private String prop1;
    private String prop2;

    public CustomObject(String prop1, String prop2) {
        this.prop1 = prop1;
        this.prop2 = prop2;
    }

    public void setProp1(String prop1) {
        this.prop1 = prop1;
    }

    public void setProp2(String prop2) {
        this.prop2 = prop2;
    }

    public String getProp1() {
        return prop1;
    }

    public String getProp2() {
        return prop2;
    }
}

下载CSV生成的客户端

问题＃1：是否有任何跨浏览器的方式完全在客户端执行此操作？

问题2：有没有更好的方法可以做到这一点具有以下部分或全部特征：

2 个答案: