美文网首页
两种导出方式

两种导出方式

作者: Augenstern___ | 来源:发表于2020-07-20 19:47 被阅读0次

//链接直接导出

     window.location.href = process.env.BASE_API+"/manage/enterprise/exportExcelEnterprise?userId="+this.usermsgData.id;

//接口导出

   getexportExcel().then(res=>{
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let fileName = '正式客户.xls';
          // let fileName = res.headers["content-disposition"].split("filename=")[1];
          if ("download" in document.createElement("a")) {
            const elink = document.createElement("a");
            elink.download =decodeURI(fileName);
            elink.style.display = "none";
            elink.href = url;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          }else {
            navigator.msSaveBlob(blob, decodeURI(fileName));
          }
      })
    })


responseType: "blob",
dataType: 'json',

下载image

  uploadCode () {
      let a_link = document.createElement('a')
      a_link.style.display = 'none'
      a_link.href= this.formList.shop_code + '?response-content-type=application/octet-stream'
      a_link.setAttribute("id", "codeLink")
      a_link.setAttribute("download", "xxx")
      document.body.appendChild(a_link)
      a_link.click()

      let objLink = document.getElementById('codeLink')
      document.body.removeChild(objLink)
},

shop_code是后台返的图片链接,需要给链接后面拼接‘?response-content-type=application/octet-stream’即可

image.png

多个文件下载

download(name, href){
    var a = document.createElement("a"), //创建a标签
    e = document.createEvent("MouseEvents"); //创建鼠标事件对象
    e.initEvent("click", false, false); //初始化事件对象
    a.href = href; //设置下载地址
    a.download = name; //设置下载文件名
    a.target="_blank";  //加上新窗口打开方式才会下载 否则只会下载最后一个
    a.dispatchEvent(e); //给指定的元素,执行事件click事件
  },
  //下载
   upload(data){
      var urlList = [url1,url2];
      for(var i = 0; i < urlList.length; i++){
        this.download('XXX',urlList[i] + '?response-content-type=application/octet-stream');
      }
  },

js导出

  //要导出的json数据
    const jsonData = [];
    this.tableData.forEach((n,i)=>{
      const arrayData = {};
      arrayData.registerCount = n.registerCount;
      arrayData.toAuditCount = n.toAuditCount;
      arrayData.supplierCount = n.supplierCount;
      arrayData.enterpriseCount = n.enterpriseCount;

      jsonData.push(arrayData)
    });
    //列标题,逗号隔开,每一个逗号就是隔开一个单元格
    let str = '已注册用户数'+','+'审核中用户数'+','+'已认证供应商'+','+'已认证采购商'+'\n';
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < jsonData.length ; i++ ){
      for(let item in jsonData[i]){
        str+=`${jsonData[i][item] + '\t'},`;
      }
      str+='\n';
    }
    //encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //通过创建a标签实现
    let link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download =  '用户概况'+'.csv';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

相关文章

网友评论

      本文标题:两种导出方式

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