美文网首页
vue中下载文件,文档,兼容ie内核浏览器,项目实战,excel

vue中下载文件,文档,兼容ie内核浏览器,项目实战,excel

作者: 小码农_影 | 来源:发表于2020-10-15 10:20 被阅读0次

    可以直接copy代码使用。

    第一步:

    需要调用下载文件的接口,项目中的接口名_downloadTemplate,返回的res是文件流,然后使用文件流去下载文件

    _downloadTemplate({signatoryId:item.signatoryId}).then(res=>{

        this.loading = false;

        this.createDownloadDom(res)

    })

    第二步:

    createDownloadDom(data) { //创建下载的dom节点

        let blob = new Blob([data.data]);//新建blob对象

        let fileName = decodeURIComponent(data.headers.filename); //获取文件名

        if('download' in document.createElement('a')) { //IE下载

            let downloadElement = document.createElement('a');//创建a标签

            let href = window.URL.createObjectURL(blob); //创建下载的链接

            downloadElement.href = href;//创建下载链接

            downloadElement.download = fileName; //下载后文件名

            document.body.appendChild(downloadElement); //添加到dom中

            downloadElement.click(); //点击下载

            document.body.removeChild(downloadElement); //下载完成移除元素

            window.URL.revokeObjectURL(href); //释放掉blob对象

        }else { //非IE下载

            window.navigator.msSaveOrOpenBlob(blob,fileName)

        }

    },

    相关文章

      网友评论

          本文标题:vue中下载文件,文档,兼容ie内核浏览器,项目实战,excel

          本文链接:https://www.haomeiwen.com/subject/tvnipktx.html