Vue通过Blob对象实现导出Excel功能示例代码

 更新时间:2020-08-01 06:25:48   作者:佚名   我要评论(0)

  不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导

  不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能。但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法。

  Blob对象表示一个不可变、原始数据的类文件对象,通常我也叫它二进制流对象。我们可以通过Blob对象实现导出Excel功能,先放上代码:

<el-button @click="exportExcel()">导出</el-button>

<script>
methods: {
 exportExcel(){
  var params={
  XX:xx//额外需要携带的请求体
  }
  this.$axios.get('/XX/XX',{
  params: params,
  responseType: 'blob' //首先设置responseType字段格式为 blob
  }).then(res => {
  console.log(res);
  let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); // 为blob设置文件类型,这里以.xlsx为例
  let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
  let a = document.createElement("a");
  a.href = url;
  a.click();
  // 释放这个临时的对象url
  window.URL.revokeObjectURL(url); 
  });
 },
 }
</script>

  'responseType'表示的是服务器响应的数据类型,可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream',默认为json。axios官方文档地址:https://www.kancloud.cn/yunye/axios/234845(axios请求配置章节)。

  所以我们接收后台传给前端的二进制流之前需要先设置responseType为blob,否则默认会以json获取,下载下来的文件打开会提示文件已损坏。控制台输出的可以看到是个正确的Blob对象,这就说明我们的配置是对的,如图1所示。

图1 控制台输出的Blob对象

  后端最好也要配置response头的content-type为对应的类型,所图2所示。

图2 后端设置了响应头相对应的content-type

  然后,需要给这个Blob对象设置一个type,这个type表明改Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。这里给出几个常用文件格式的MIME类型:(详细的可参考WebAPI官方文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)

扩展名----------MIME类型

  .csv--------------text/csv

  .jpeg/.jpg-------image/jpeg

  .png-------------image/png

  .rar--------------application/x-rar-compressed

  .doc-------------application/msword

  .docx-----------application/vnd.openxmlformats-officedocument.wordprocessingml.document

  .xls--------------application/vnd.ms-excel

.xlsx------------application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

  .zip--------------application/zip

  在正常的导出请求之后可以看到又发了一个新的blob请求,其本质是到这个地址下载文件,如图3所示:

图3 创建一个临时的url指向blob对象

  一般来说,这样就可以实现下载的功能了。

  这里提点题外话,谷歌浏览器下载设置默认为浏览器下载默认路径,也就不会弹出文件框,谷歌浏览器下载文件框如图4所示,也就没有了所谓的自定义保存路径和自定义文件名,如图5所示,在浏览器底部会有下载提示。

图4谷歌浏览器下载文件框

图5 谷歌浏览器下载会在屏幕底部显示

  如果想要有下载文件框,请在设置->高级->下载内容->下载前询问每个文件的保存位置中设置为启用。

总结

到此这篇关于Vue通过Blob对象实现导出Excel功能的文章就介绍到这了,更多相关vue 通过blob对象导出excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • Vue利用Blob下载原生二进制数组文件
  • Vue结合后台导入导出Excel问题详解
  • Vue实现导出excel表格功能
  • vue2.0 + element UI 中 el-table 数据导出Excel的方法
  • Vue导出json数据到Excel电子表格的示例
  • Vue2.0实现将页面中表格数据导出excel的实例

相关文章

  • Vue通过Blob对象实现导出Excel功能示例代码

    Vue通过Blob对象实现导出Excel功能示例代码

      不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导
    2020-08-01
  • 如何巧用vimdiff来替代原始的svn diff和git diff(效率提升)

    如何巧用vimdiff来替代原始的svn diff和git diff(效率提升)

    有许多命令行选手在linux下开发的时候会经常遇到一个问题,无论是svn还是git,提供的原始diff功能太难以阅读,我们希望的是能够命令行下也能展示side by side的对比
    2020-08-01
  • vue抽出组件并传值实例

    vue抽出组件并传值实例

    使用父组件向子组件传值的方式 1,抽出的组件以及写法 2,注册使用的父组件以及传值,父组件return images 补充知识:vue如何抽取公共组件并全局注册 项目的抽象程
    2020-08-01
  • three.js 制作动态二维码的示例代码

    three.js 制作动态二维码的示例代码

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createE
    2020-08-01
  • Java内存模型知识详解

    Java内存模型知识详解

    1. 概述   多任务和高并发是衡量一台计算机处理器的能力重要指标之一。一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per Second,TPS)这
    2020-08-01
  • Java中Thread.join()的使用方法

    Java中Thread.join()的使用方法

    概要 本文分三个部分对Thread.join()进行分析: 1. join() 的示例和作用 2. join() 源码分析 3. 对网上其他分析 join() 的文章提出疑问 1. join() 的示例和作用 1.1
    2020-08-01
  • Python使用shutil模块实现文件拷贝

    Python使用shutil模块实现文件拷贝

    主要作用与拷贝文件用的。 1.shutil.copyfileobj(文件1,文件2):将文件1的数据覆盖copy给文件2。 import shutil f1 = open("1.txt",encoding="utf-8") f2 = o
    2020-08-01
  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,
    2020-08-01
  • Java 操作Properties配置文件详解

    Java 操作Properties配置文件详解

    java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式,在properties 文件
    2020-08-01
  • Python如何执行精确的浮点数运算

    Python如何执行精确的浮点数运算

    问题 你需要对浮点数执行精确的计算操作,并且不希望有任何小误差的出现。 解决方案 浮点数的一个普遍问题是它们并不能精确的表示十进制数。 并且,即使是最简单
    2020-08-01

最新评论