h5浏览器实现文件下载

const name = '文件'
这个方法在移动端已可以正常下载文件,在电脑端会自动打开一个页面,并不会下载

var a = document.createElement("a");
  a.setAttribute("href", fileUrl);
  a.setAttribute("target", "_blank");
  let clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent("click", true, true);
  a.dispatchEvent(clickEvent);

下面这个在移动端存在兼容性问题

var xhr = new XMLHttpRequest();
xhr.open('GET', state.pdfUrl, true);
xhr.responseType = "blob"; //关键的一步
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            var blod = this.response;
            // 兼容IE
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                navigator.msSaveBlob(blod, filename)
            } else {
                // var src = URL.createObjectURL(blod);
                var eleLink = document.createElement("a");
                eleLink.download = filename;
                eleLink.href = URL.createObjectURL(blod);
                document.body.appendChild(eleLink);
                eleLink.click();
                URL.revokeObjectURL(eleLink.href)
                document.body.removeChild(eleLink)
            }
        }
    }
};
xhr.send()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容