18/9/21 自动下载与禁止右键问题

[Fox-Valentin]

自动下载

在网上有很多ajax自动下载文件的代码，如下

var xhr = new XMLHttpRequest();
// 也可以使用POST方式，根据接口
xhr.open('GET', url, true);
// 返回类型blob
xhr.responseType = "blob";
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
        // 返回200
        var blob = this.response;
        if (navigator.msSaveBlob) {
            return navigator.msSaveBlob(blob, filename);
        }
        var reader = new FileReader();
        // 转换为base64，可以直接放入a表情href
        reader.readAsDataURL(blob);
        reader.onload = function (e) {
            // 转换完成，创建一个a标签用于下载
            var a = document.createElement('a');
            a.download =filename;
            a.target = "_blank";
            a.href = e.target.result;
            // 修复firefox中无法触发click
            $("body").append(a);
            a.click();
            $(a).remove();
        }
    }
};

但是 ie 没法通过 a 标签自动点击来下载资源，同时如果手动点击a标签，ie只会在地址栏中输出Base64码而不会下载，网上有建议加target=_blank 属性但实测无效

处理的方法是使用 ie 特有的 api navigator.msSaveBlob将返回的数据流放入就可以弹出是否要保存的提示框navigator.msSaveBlob(blob, filename);

禁止右键问题

需求是在页面的柱状图上不可以触发右键保存，否则会有泄露数据的危险
处理方式是在该位置上触发右键时禁用右键菜单

document.getElementById("#id").oncontextmenu=function(event) {
    if (document.all) window.event.returnValue = false;// for IE
    else event.preventDefault();
}