js 实现纯前端将数据导出excel两种方式

最新推荐文章于 2024-07-05 18:01:07 发布

小小勤~

最新推荐文章于 2024-07-05 18:01:07 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript知识点 Vue知识点文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_41008567/article/details/111279014

版权

本文介绍了在Vue.js项目中如何实现前端将数据导出为Excel文件的两种方法：通过后端返回的字符串格式数据和二进制文件流数据格式。

摘要由CSDN通过智能技术生成

博客参考

vue中将数据导出excel

一、后端导出接口返回字符串格式数据格式

   <el-button type="primary" plain @click="Ex">导出</el-button>
   Ex() {
   
       //str=后端导出接口--返回的数据内容
       let str = `指标名称,粒度,指标值,设备名称,指标来源,指标时间,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 13:00:00	,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 14:00:00	,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 15:00:00	,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 16:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 17:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 18:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 19:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 20:00:00	,`;
       //encodeURIComponent解决中文乱码
       let uri = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(str);
       //通过创建a标签实现
       var link = document.createElement("a");
       link.href = uri;
       //对下载的文件命名
       link.download = "json数据表.xls";
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
   },

二、后端导出接口返回二进制文件流数据格式

   /**
    * 通过post方式导出文件
    * @param      key                 请求定义静态地址
    * @param      data                请求参数
    * @return     {Promise<*>}        返回promise对象
   */
   let postFileExport = (key, data, params, base