zoukankan      html  css  js  c++  java
  • 前端导出功能实现的两种方式

    1.点击链接

    数据、文件格式全部在后台封装好,返回给前端一个链接,前端通过点击链接自动下载,两种方式:

    1 (1)window.location.href = ‘url’
    2 (2)<a href='url' download=''></a>

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

    这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。

     1 // 发请求
     2 this.axios.post(url, {param: paramName}, {responseType: 'arraybuffer'}).then(res => {
     3     let content = res.data; // 文件流
     4     let blob = new Blob([content],{type: 'application/octet-stream'});
     5     let fileName = 'filename.xls';
     6     // 如果后端返回文件名
     7     // let contentDisposition = res.headers['content-disposition'];
     8     // let fileName = decodeURI(contentDisposition.split('=')[1]);
     9         if ('download' in document.createElement('a')) {  // 非IE下载
    10         let link = document.createElement('a');
    11         link.download = fileName;
    12         link.style.display = 'none';
    13         link.href = URL.createObjectURL(blob);
    14         document.body.appendChild(link);
    15         link.click();
    16         URL.revokeObjectURL(link.href) ; // 释放URL 对象
    17         document.body.removeChild(link);
    18     } else {  // IE10+下载
    19       navigator.msSaveBlob(blob,fileName);
    20     }
    21 })
  • 相关阅读:
    中国大概可用NTPserver地址
    ROOT android 原则。 基于(zergRush)
    Struts2他们拦截器实例定义—登陆权限验证
    引用与指针
    address_space 从哪里来
    C++ 可以多个函数声明
    linux下远程管理利器-tmux
    内核空间和用户空间的分界 PAGE_OFFSET
    io端口
    C中程序的内存分配
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/13891077.html
Copyright © 2011-2022 走看看