vue中各种文档的下载/导出

1.下载本地的文件

1.在vue-cli 3.x+中，直接将文件放在public下面

     window.location.href="/file/xxx.doc"

这种写法本地不会有问题，但是线上部署出现了问题，显示文件找不到；所以改为
window.location.href=`${process.env.BASE_URL}file/beian_import.xls`
当前也可以不用window.location.href来下载，可以使用dom动态生成a标签来下载；

downExcel(){
      var link = document.createElement("a"); 
      link.setAttribute("download", "");
      link.href = `${process.env.BASE_URL}file/beian_import.xls`;
      link.click();
      link.remove();
    },

2.在vue-cli 2.x+中将文件放置在static文件夹下面

    window.location.href="http://localhost:8080/static/template.xlsx" ;

2.下载后台返回数据成功的json文件

    downJson(data,file_name){
       exportRecordDown(data).then(res=>{
       var data = JSON.stringify(res.data) 
      //encodeURIComponent解决中文乱码  data:text/csv;charset=utf-8,\uFEFF(加    \uFEFF是实现bob)
      let uri ='data:text/csv;charset=utf-8,' +encodeURIComponent(data);
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download =  file_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
   })
},

3.下载csv文件

handleExport(){
        if(!this.tableData || this.tableData.length <=0 ){
            this.$message.error('没有要导出的数据')
            return
  }
        let csvContent = this.headerLabel + '\n\t'
        this.tableData.forEach((item, index) => {
            let dataString = ''
            for(let i = 0; i < this.headerProp.length; i++ ){
            //如果数据为null或者undefined， 下载下来的数据框中会被直接填写上null或undefined
            //可根据个人选择自行选择是否需要这行代码
                if(item[this.headerProp[i]]==null||item[this.headerProp[i]]==undefined){
                    item[this.headerProp[i]] = ''
                }
                dataString += item[this.headerProp[i]] + ','
            }
            csvContent += (index < this.tableData.length ? dataString.replace('/,$/', '\n\t') : dataString.replace('/,$/', '\n\t'))+'\n\t'
  })
  console.log(csvContent)
        //最终csvContent的格式为"col1,col2,col3 \n value1, value2, value3 \n value4, value5, value6"
        //data:text/csv;charset=utf-8,\ufeff, utf-8的编码格式，保证中文不乱码
        // this.$refs.link.setAttribute('href', 'data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(csvContent))
  // this.$refs.link.setAttribute('download', this.fileName+'.csv')
    var url='data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(csvContent);
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download',  '僵尸网站数据表'+'.csv')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
},
//数据遍历筛选
  computed: {
  headerLabel(){
    var result=[];
    this.checkListShow.forEach(item=>{
      result.push(item.name)
    })
    return result
  },
  headerProp(){
    var result=[];
    this.checkListShow.forEach(item=>{
      result.push(item.prop)   
    })
    return result
  }
 },

3.下载后台返回文件流数据

image.png
exportBillingExcel(data, res){
  if (!data) {//如果没有data数据就不进行操作
     return
   }
  // 获取headers中的filename文件名
  let tempName = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
  // iconv-lite解决中文乱码
  let iconv = require('iconv-lite')
  iconv.skipDecodeWarning = true// 忽略警告
  let fileName = iconv.decode(tempName, 'gbk')
  let blob = new Blob([data], { type: 'application/octet-stream' })//转换成二进制对象
  if ('download' in document.createElement('a')) { // 不是IE浏览器
    let url = window.URL.createObjectURL(blob)//二进制对象转换成url地址
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放掉blob对象
  } else {
    window.navigator.msSaveBlob(blob, fileName)
  }
},

4.下载后台返回数据的.log后缀、.pem后缀文件

downFile(data,name){
            let blob = new Blob([data], {type: "application/octet-stream"});     //下载文件的通用格式
                console.log(window.navigator.msSaveBlob)
                if (window.navigator.msSaveBlob) {
                    window.navigator.msSaveBlob(blob, name+ '.' + 'log');//处理IE下载的兼容性
                } else {
                    let downloadElement = document.createElement('a');
                    let href = window.URL.createObjectURL(blob); //创建下载的链接
                downloadElement.href = href;
                    downloadElement.download =  name+ '.' + 'log' ; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
            }
        }

5.下载图片

link.setAttribute("download", "");
link.href ="图片地址路径";
link.click();

6.下载二进制流文件

exporBeianPdf('', { responseType: 'blob' })
        .then(res => {
          this.downBinary(res);
        })
        .catch(() => {
          this.$message.error('导出失败，请重试。');
        });
// 下载二进制文件
    downBinary(res) {
      const data = res.data;
      const tempName = res.headers['content-disposition']
        .split(';')[1]
        .split('filename=')[1];
      /* 兼容ie内核，360浏览器的兼容模式 */
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        const blob = new Blob([data]);
        window.navigator.msSaveOrOpenBlob(blob, tempName);
      } else {
        /* 火狐谷歌的文件下载方式 */
        var blob = new Blob([data]);
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = tempName;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      }
    },

7.base64文件下载，图片和文件都适用

dwonImageBase64(name,data){
      //let imgData = "data:image/jpg;base64," + ret;  
     //data是带有"data:image/jpg;base64,"的内容的值
       this.downloadFile(name, data);
    },
    downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        // aLink.dispatchEvent(evt);
        aLink.click()
   },
    base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
    },

8.前端实现批量下载文件

function downloadFile(url) {

var iframe = document.createElement('iframe')

iframe.style.display = 'none' // 防止影响页面

iframe.style.height = 0 // 防止影响页面

iframe.src = url

document.body.appendChild(iframe) // 这一行必须，iframe挂在到dom树上才会发请求

console.log(iframe)

// 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）

setTimeout(() => {

iframe.remove()

}, 5000)

}

9.axios请求responseType为blob时，错误数据处理

remoteRecoverPost(data) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      getTokenData().then((res) => {
        remoteRecover(data, {
          headers: {
            common: { 'X-CSRFToken': res.data.data.csrf_token },
          },
          responseType: 'blob',
        })
          .then((ress) => {
            loading.close();
            const resData = ress.data;
            const fileReader = new FileReader();
            fileReader.onloadend = () => {
              try {
                const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
                this.$message.warning(jsonData.msg);
              } catch (err) {
                // 解析成对象失败，说明是正常的文件流
                // 下载文件
                this.exportBillingExcel(ress);
              }
            };
            fileReader.readAsText(resData);
          })
          .catch(() => {
            loading.close();
          });
      });
    },

上面只写了一种判断方法，其实还有一种，如下

 if (resData.type === 'application/json') {
      const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败
      // 后台信息
      console.log(jsonData)
    } else {
      // 下载文件
      his.exportBillingExcel(ress);
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 193,968评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,682评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,254评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,074评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,964评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,055评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,484评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,170评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,433评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2赞 308
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1赞 325
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,184评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,545评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2赞 335