前端导出功能实现的方法

2022-04-28 15:00:38 阅读：133 来源： 互联网

标签：功能 const dom url 前端导出 fileName content download

1.通过点击链接（后端返回url）
window.location.href = url

2.解析后端返回的文件流

downOrder(){
let form ={}
this.$axios({
    method:'post',//请求方式
    headers:{
       'token':'this.token',
       'Content-Type': 'application/json;charset=UTF-8'
        },
        url: 'url',
        data:form,//请求参数
        responseType:'blob'//服务器返回的数据类型
     }).then(response=>{
     const content = response.data //返回的内容
     const fileName ='文件名称'+ '.xls'//下载文件名
     download(content,fileName)
     this.loading = false;
     }).catch(err=>{
         this.$message({
             type: 'error',
             message: '导出失败',
           });
            this.loading = false;
          });
 //处理下载流
 function download(content,fileName){
     const blob = new Blob([content]) //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
     const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
     let dom = document.createElement('a')//设置一个隐藏的a标签，href为输出流，设置download
     dom.style.display = 'none'
     dom.href = url;
     dom.setAttribute('download',fileName)//指示浏览器下载url,而不是导航到它；因此将提示用户将其保存为本地文件
     document.body.appendChild(dom)
     dom.click()
  }                
｝

标签：功能,const,dom,url,前端,导出,fileName,content,download
来源： https://www.cnblogs.com/ylh188/p/16202885.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端导出功能实现的方法