是否有用于链接下载和数据uri的polyfill？ [英] Is there a polyfill for link download with data uri?

问题描述

我应该由服务器生成一些代码：

I have some code should be generated by the server:

<a download="test.csv" href="data:text/plain;charset=utf-8;base64,w4FydsOtenTFsXLFkXTDvGvDtnJmw7p0w7Nnw6lwLg==">
    teszt
</a>

它适用于当前的chrome，firefox，opera。我希望它支持MSIE11。 Afaik msSaveBlob 就是解决方案。是否有我可以使用的现有js polyfill，或者我应该写它？

It works with current chrome, firefox, opera. I'd like it to support MSIE11. Afaik msSaveBlob is the solution for that. Is there an existing js polyfill I could use, or should I write it?

推荐答案

好的我做了一个简单的polyfill基于我在SO答案中找到的代码和此处。我在MSIE11上测试了它，它的工作原理。它不支持使用 XHR 进行文件下载，只支持数据URI。如果您想强制下载文件，我建议使用 Content-Disposition 响应标头。在我的情况下，服务器只是创建文件，但不应该存储它，我也需要HTML响应，所以这是要走的路。另一种解决方案是通过电子邮件发送文件，但我发现这个文件更好。

Okay I made a simple polyfill based on the code I found in SO answers and here. I tested it on MSIE11, it works. It does not support file download with XHR, just data URIs. I recommend to use the Content-Disposition response header instead if you want to force file download. In my case the server just creates the file, but should not store it and I needed a HTML response as well, so this was the way to go. An alternative solution would be to send the file in email, but I found this one better by small files.

(function (){

    addEvent(window, "load", function (){
        if (isInternetExplorer())
            polyfillDataUriDownload();
    });

    function polyfillDataUriDownload(){
        var links = document.querySelectorAll('a[download], area[download]');
        for (var index = 0, length = links.length; index<length; ++index) {
            (function (link){
                var dataUri = link.getAttribute("href");
                var fileName = link.getAttribute("download");
                if (dataUri.slice(0,5) != "data:")
                    throw new Error("The XHR part is not implemented here.");
                addEvent(link, "click", function (event){
                    cancelEvent(event);
                    try {
                        var dataBlob = dataUriToBlob(dataUri);
                        forceBlobDownload(dataBlob, fileName);
                    } catch (e) {
                        alert(e)
                    }
                });
            })(links[index]);
        }
    }

    function forceBlobDownload(dataBlob, fileName){
        window.navigator.msSaveBlob(dataBlob, fileName);
    }

    function dataUriToBlob(dataUri) {
        if  (!(/base64/).test(dataUri))
            throw new Error("Supports only base64 encoding.");
        var parts = dataUri.split(/[:;,]/),
            type = parts[1],
            binData = atob(parts.pop()),
            mx = binData.length,
            uiArr = new Uint8Array(mx);
        for(var i = 0; i<mx; ++i)
            uiArr[i] = binData.charCodeAt(i);
        return new Blob([uiArr], {type: type});
    }

    function addEvent(subject, type, listener){
        if (window.addEventListener)
            subject.addEventListener(type, listener, false);
        else if (window.attachEvent)
            subject.attachEvent("on" + type, listener);
    }

    function cancelEvent(event){
        if (event.preventDefault)
            event.preventDefault();
        else
            event.returnValue = false;
    }

    function isInternetExplorer(){
        return /*@cc_on!@*/false || !!document.documentMode;
    }

})();

这篇关于是否有用于链接下载和数据uri的polyfill？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！