vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue文件文档下载导出

vue实现各种文件文档下载及导出示例

作者：陶菇凉

这篇文章主要介绍了vue实现各种文件文档下载及导出示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1.下载本地的文件

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

     window.location.href="/file/xxx.doc" rel="external nofollow"

这种写法本地不会有问题，但是线上部署出现了问题，显示文件找不到；所以改为
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();
    },

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

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

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
  }
 },

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

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)
  }
},

5.下载后台返回数据的.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对象
            }
        }

6.下载图片

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

7.下载二进制流文件

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);
      }
    },

8.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});
    },

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

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(() =&gt; {
iframe.remove()
}, 5000)
}

10.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);
    }

以上就是vue实现各种文档下载及导出示例的详细内容，更多关于vue文档下载导出的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文