开发者社区> 五个半柠檬> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

vue.js前端实现excel表格导出和获取headers里的信息

简介:
+关注继续查看

前段时间写过一篇文章基于element实现后台管理系统,并提到excel表格导出功能,可能描述不是很详细,现在单独整理列出。

后端提供的接口:

// 下载分拣列表
export function getAssormentExport(params) {
  return request({
    url: '/manage/health/assorment/export?ids=' + params,
    responseType: 'arraybuffer', // 代表内存之中的一段二进制数据 必须加
    method: 'get'
  })
}

vue:点击按钮调用接口

<el-button type="primary" size="mini" @click="addexport()">导出选中</el-button>

script:

    // 导出选中
    addexport() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          showClose: true,
          message: '未选中数据',
          type: 'error'
        })
        return
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id)
      } // push一个新的数组,存储需要导出信息的ID并传给接口实现数据返回
      getAssormentExport(this.ids).then(
        function(response) {
          const filename = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1]) || '分拣表.xlsx'
          this.fileDownload(response.data, filename) // response.data是后端返回的二进制数据流,filename是获取到的导出文件名,获取失败使用默认值
          this.ids = []
        }.bind(this)
      ).catch(
        function(error) {
          this.$message({
            showClose: true,
            message: error,
            type: 'error'
          })
          this.ids = []
        }.bind(this)
      )
    },
    fileDownload(data, fileName) {
      const blob = new Blob([data], {
        type: 'application/octet-stream'
      })
      const filename = fileName || 'filename.xlsx'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        var blobURL = window.URL.createObjectURL(blob)
        var tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    },

查看调用接口返回的信息

5cfd4731e2785b480a22306ec2d4f41acc0.jpg

备注:

1.response返回了包含响应头所带的所有数据,可以使用console.log(response)查看打印数据,但是打印出来的数据只能拿到默认的响应头,这里有个需要注意的地方。

  • Cache-Control

  • Content-Language

  • Content-Type

  • Expires

  • Last-Modified

  • Pragma

如果想让浏览器能访问到其他响应头的话,需要后端在服务器上设置Access-Control-Expose-Headers

Access-Control-Expose-Headers : 'content-disposition'

后端大致写法:

headers.add("Access-Control-Expose-Headers", "Content-Disposition");

这样response.headers['content-disposition'].split(';')[1].split('=')[1] 就能取到接口返回的文件名称了。

2. decodeURI的使用

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

实例

在本例中,我们将使用 decodeURI() 对一个编码后的 URI 进行解码:

<script type="text/javascript">

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))

</script>

输出:

http://www.w3school.com.cn/My%20first/
http://www.w3school.com.cn/My first/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue.JS实现导出Ecxcel功能(vue-json-excel)
Vue.JS实现导出Ecxcel功能(vue-json-excel)
42 0
SAP Spartacus 基于行项目的订单取消功能(order cancel)实现
SAP Spartacus 基于行项目的订单取消功能(order cancel)实现
39 0
EXcel vba 获取批注信息
Public Function pizhu(i As Range) pizhu = i.Cells.Comment.Text End Function EXcel VBA获取批注信息网名:浩秦; 邮箱:root#landv.pw; 只要我能控制一個國家的貨幣發行,我不在乎誰制定法律。
1076 0
《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区《Web前端开发精品课——HTML5 Canvas开发详解》一书中的第1部分,第2章,作者:莫振杰 著,更多章节内容可以访问云栖社区“异步社区”公众号查看
2382 0
高性能Web服务端 PHP vs Node.js vs Nginx-Lua 的对比分析
1. ngx_lua nodejs php 比较   我在研究一阵子ngx_lua之后发现lua语法和js真的很像,同时ngx_lua模型也是单线程的异步的事件驱动的,工作原理和nodejs相同,代码甚至比nodejs的异步回调更好写一些。
1436 0
+关注
五个半柠檬
做到零bug~
6
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载