zoukankan      html  css  js  c++  java
  • vue中前端实现下载excel文件,.csv文件, .sql文件

    主要是使用了js的new Blob方法

    //如果需要适应IE的话加上这个方法

    MyBrowserIsIE() {

      let isIE = false;

      if(navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) {

        isIE = true

      } if (navigator.userAgent.indexOf('Trident') > -1) {

        isIE = true;

      }

      return isIE 

    }

    //excel文件下载
    toExcell(index, row) {

      if(row.oStyle == 1){
        this.$axios({
          method: "post",
          data: {},
          responseType: "blob"
        })
        .then(res => {
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          let num = "";
          for (let i = 0; i < 10; i++) {
            num += Math.ceil(Math.random() * 10);
          }
          link.setAttribute("download", "用户_" + num + ".xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(error => {
          this.$Notice.error({
            title: "错误",
            desc: "网络连接错误"
          });
        });
     }
    }
     
    //下载》sql文件
    export(){
    axios.get('/***', {
      params: {
       ids:1,
      datatype:'DB2' } }) .then(function (data) { let blob = new Blob(['ufeff' + data],{
        type:'application/text'
      });
      let dateStr = new Date().toLocaleDateString().replace(///g,'-');
      if (this.MyBrowserIsIE()) {
        navigator.msSaveBlob(blob,'functions_' + dataStr + '.sql');
      } else {
        let url = URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.setAttribute('download', 'functions_' + dataStr + '.sql');
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      }
      this.$message({
        type:'success',
        message:'导出成功!',
        duration:3000
      })

    }) .catch(function (error) { 
      this.$message({
        type:'error',
        message:'导出失败,请检查网络!',
        duration:3000
      })
    });
    }
     
    .csv文件下载只需要替换为这一段代码
     
    let blob = new Blob(["ufeff" + data],{
      type:'text/csv'
    });
    let dataStr = new Date().toLocaleDateString().replace(///g,'-');
    if(this.MyBrowserIsIE()){
      navigator.msSaveBlob(blob,'abbrSpecInfo_' + dateStr + '.csv');
    } else {
      let a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.target = '_blank';
      a.download = ('abbrSpecInfo_' + dateStr + '.csv');
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
     
    }
        
  • 相关阅读:
    例子:进度条制作
    例子:滑动效果
    例子:选项卡效果
    例子:图片轮播
    9.23 开课第二十天 (事件)
    例子:日期时间选择
    例子:两个列表之间移动数据
    php数据访问基础
    php面向对象加载类、常用设计模式
    php面向对象中的静态与抽象,接口
  • 原文地址:https://www.cnblogs.com/songxueqing/p/13392249.html
Copyright © 2011-2022 走看看