使用vue导出excel遇到的坑及解决

 更新时间:2022年04月07日 11:19:12   作者:前端陈晨  
这篇文章主要介绍了使用vue导出excel遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue导出excel遇到的坑

需求

Vue+element UI el-table下的导出当前所有数据到一个excel文件里。

先按照网上的方法,看看有哪些坑

准备工作

1、安装依赖:yarn add xlsx file-saver -S

2、在放置需要导出功能的组件中引入

import FileSaver from "file-saver";
import XLSX from "xlsx";

3、HTML中的设置,简单来说就是给需要导出的table标签el-table上加一个id:如outTable,对应下面的exportExcel方法中的 document.querySelector(‘#outTable‘)

   //导出当前表格
exportCurrent:function(){
    var wb = XLSX.utils.table_to_book(document.querySelector('#outTable')) //表格id
    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheet.xlsx')  //文件名
    } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    return wbout
},

我们来看一下原始数据

接下来再来看一下导出的结果

哎???我订单编号跟银行卡号咋成了科学计数法了??

还有我的时间,时分秒呢??

原因是因为数字太长了,需要使用excel的文本格式才能显示正常

经过各种搜索,最终解决方法如下:

exportExcel() {
      var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

再来看我们的数据

大功告成。

vue导出excel表报错处理

Excel表导出功能需要将请求中的 responseType 设置为 blob,也就是说请求只能接收Excel文件,json数据没法处理

此时可以根据 Response 的 Content-Type值类判断处理,如果值 为 application/json,则先将返回的数据转换成字符串,然后再转换为 JSON

        // 导出
        downLoad(){
            const fileReader = new FileReader() // 第一步创建文件对象
            const loading = this.$loading({
                lock: true,
                text: '导出加载中···',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const data = {
                equipmentName: this.searchForm.equipmentName,
                equipmentCode: this.searchForm.equipmentCode,
            };
            download('/api/mfg-mes/equipmentVersion/exportStandardWorkTime', data).then(res => {
                fileReader.onloadend = () => { // 定义方法
                    if (res.type === 'application/json') { // 第三步进行判断
                        const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据,后台转换失败
                        // 后台信息
                        // console.log(jsonData,'fileReader')
                        this.$message.error(jsonData.msg)
                        loading.close();
                    }else{
                        downloadFile(res, '信息表', 'xlsx')
                        loading.close();
                    }
                }
                fileReader.readAsText(res)
            }).catch(err => {
                console.log(err);
            })
        },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中添加音频和视频的示例详解

    vue中添加音频和视频的示例详解

    这篇文章主要为大家详细介绍了如何vue中添加音频和视频的相关知识,文中的示例代码简洁易懂,具有一定的学习价值,感兴趣的小伙伴可以了解下
    2023-08-08
  • Vue3  defineExpose要在方法声明定义以后使用的教程

    Vue3  defineExpose要在方法声明定义以后使用的教程

    这篇文章主要介绍了Vue3  defineExpose要在方法声明定义以后使用的教程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • VUE中使用HTTP库Axios方法详解

    VUE中使用HTTP库Axios方法详解

    本文将详细介绍在VUE中使用HTTP库Axios的详细方法,需要的朋友可以参考下
    2020-02-02
  • 多个vue子路由文件自动化合并的方法

    多个vue子路由文件自动化合并的方法

    这篇文章主要给大家介绍了关于多个vue子路由文件自动化合并的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • vue实现登陆功能

    vue实现登陆功能

    这篇文章主要为大家详细介绍了vue实现登陆功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • VUE重点问题总结

    VUE重点问题总结

    本篇内容给大家总结了VUE的重要难点,并把代码做了详细分享,有兴趣的朋友参考学习下。
    2018-03-03
  • 5种vue模糊查询的方法总结

    5种vue模糊查询的方法总结

    在Vue中,有多种方式可以实现模糊查询,这篇文章主要介绍了5种vue中的常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • vuex模块获取数据及方法的简单示例

    vuex模块获取数据及方法的简单示例

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue过滤器filters的用法及时间戳转换问题

    Vue过滤器filters的用法及时间戳转换问题

    Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法,感兴趣的朋友一起看看吧
    2021-09-09
  • vue.js实现图书管理功能

    vue.js实现图书管理功能

    这篇文章主要为大家详细介绍了vue.js实现图书管理功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论