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

目录
  • vue导出excel遇到的坑
    • 需求
    • 准备工作
  • 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);
            })
        },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue前端导出Excel文件的详细实现方案

    Vue前端导出Excel文件的详细实现方案

    目录 一.技术选型 二.技术实现 使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式 基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法 三.参考资料 总结 一.技术选型 1.使用 vue-json-excel 插件实现 优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器

  • vue中使用js-xlsx导出excel的实现方法

    目录 安装 第一种 第二种 第三种 安装 npm install --save xlsx file-saver 在组件里面引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 第一种 其中#outTable是在el-table上定义的id exportExcel() {       var xlsxParam = { raw: true };//转换成excel时,使用原始的格式       var wb = XLSX.uti

  • vue 封装导出Excel数据的公共函数的方法

    vue 封装导出Excel数据的公共函数的方法

    vue+element UI 封装一个导出Excel数据的公共函数 将公共方法封装在store的modules的common.js中,如下图: 代码如下: const download = { actions: { downloadData({ commit, state }, data) { return new Promise((resolve, reject) => { data.event(data.formData).then(res => { const blob = new Bl

  • Vue请求后端接口导出excel表格方式

    Vue请求后端接口导出excel表格方式

    目录 vue请求后端接口导出excel 调用后端接口导出excel无效果,直接访问后端url可以 controller层代码 serviceImpl代码 导出模板路径 工具箱代码 vue前端写法 vue请求后端接口导出excel 项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格 后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据 如下图,请求接口返回的数据都是乱码 这里我们可以在axios的请求里添加,这样返回的二进制数据就会被读取为Blob的数据

  • 基于Vue实现Excel解析与导出功能详解

    基于Vue实现Excel解析与导出功能详解

    目录 前言 基本介绍 代码实现 基本结构 上传解析 Excel的导出 基本结构 导出Excel 总结 前言 最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开发中还是比较常见的,趁着周末做一下整理学习吧 基本介绍 主要基于Vue+element实现文件的解析与导出,用的的插件是 xlsx,里面的具体方法,感兴趣的去研究一下,基本的样式,配置就不赘述了,也比较简单,我们直接上主食 代码实现 基本结构 用户点击文件上传,将excel的表格已json的格式显示在页

  • Vue 前端导出后端返回的excel文件方式

    Vue 前端导出后端返回的excel文件方式

    目录 前端导出后端返回的excel文件 处理文件的下载(后端Excel导出) 后端文件流 通过 Blob 下载 拼接 URL 下载 前端导出后端返回的excel文件 在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 页面: 先筛选,向后端请求接口返回excel文件,代码如下: const apiUrl = this.Global.httpUrl + '/laima/export/new/exportTackOutOrder' console.log(this

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

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

    目录 vue导出excel遇到的坑 需求 准备工作 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&q

  • Vue导出Excel功能的全过程记录

    Vue导出Excel功能的全过程记录

    目录 1.前端主导流程: 2. 插件使用及初始化 2.1  借助vue-admin中提供的方法. 2.2  安装插件依赖. 2.3  回调函数内容如下 3.对后台数据进行处理,完成想要的效果 3.1  准备一个数据处理函数(最后会在回调里面使用) 3.2  先处理表头,定义一个对象,目的是待会将表头的英文转成中文 3.3  定义表头 3.4  要处理后台返回数据 3.5   表头处理逻辑 3.6 表格data处理逻辑 3.7 函数返回 3.8 最终完成 总结: 1.前端主导流程: 1.点击页面中

  • vue导出excel表格的新手详细教程

    vue导出excel表格的新手详细教程

    目录 前言 一.安装vue-json-excel 二.main.js中引入 三.在代码中使用 四.数据 五.效果 六.一些常用参数 总结 前言 在开发的时候,会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下 一.安装vue-json-excel npm install vue-json-excel -S 二.main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('downloadExcel', JsonEx

  • vue导出excel文件流中文乱码问题及解决

    vue导出excel文件流中文乱码问题及解决

    目录 导出excel文件流中文乱码 导出excel乱码(锟斤拷唷?锟?:锟斤拷) 导出excel文件流中文乱码 解决此方法很多网上的差不多都可以.一下提供简单的方法 loads(){ let data={ userWord:this.dataList.userWord, examId:this.$route.query.id, exportType:this.active, } api.exportUserResult(data).then((res) => { const blob = new

  • vue监听scroll的坑的解决方法

    vue监听scroll的坑的解决方法

    最近开始用vue写个小项目,踩了不少坑,这里记录下爬坑过程,给有同样经历的人帮助. 问题 今天想在vue的项目里面用下拉加载,然后就直接写了: 但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁. 解决办法 我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了. 使用throttle出现的新问题 下拉加载一般需要配合throttle

  • asp.net导出Excel乱码的原因及解决方法

    复制代码 代码如下: protected void Excel_Click(object sender, EventArgs e) { Response.Charset = "UTF-8"; Response.ClearContent(); Response.Clear(); Response.ContentEncoding = System.Text.Encoding.UTF8; Response.HeaderEncoding = System.Text.Encoding.UTF8;

  • 基于PHP导出Excel的小经验 完美解决乱码问题

    我在PHP项目里要求把数据导出为Excel,并且数据中包含中文.网上大概了解一下可是使用PHPExcel,可是相对我的需求,这个框架太复杂了.于是还是想找找简单做法.网上发现其实最简单可以这样写,但问题是这种做法中文的编码不可靠.. 复制代码 代码如下: <?php  header("Content-type:application/vnd.ms-excel");  header("Content-Disposition:attachment;filename=expo

  • vue使用mui遇到的坑及解决

    vue使用mui遇到的坑及解决

    目录 使用mui遇到的坑记录 mui的js冲突了,有2种解决方法 方法1 方法2 使用mui遇到的坑记录 主要用到webpack打包工具与mui,mint ui,其中mui有不少坑,在此记录 先是用mui的tab组件做了个底部选项卡,如下 不错,样式还行,但是后期发现切换选项的时候会报错Unable to preventDefault inside passive event listener due to target being treated as passive,如下 但是这个错误并不会

  • vue项目热更新的坑及解决

    vue项目热更新的坑及解决

    目录 vue项目热更新坑 vue项目热更新慢 查找热更新慢是哪里慢—分析原因 解决办法 vue项目热更新坑 今天在使用vue-cli构造的vue项目时,遇到一个坑. setInterval(() => { console.log('This is one.') }, 10000) 运行后如下: 这时我们修改其中的代码,不刷新网页: setInterval(() => { console.log('This is two.') }, 1000) 结果如下,发现之前的计时函数以久存在,热更新 !=

  • vue中this.$refs的坑及解决

    vue中this.$refs的坑及解决

    目录 vue this.$refs的坑 以下三点小坑坑 vue的坑 this.refs为空 总结来说 vue this.$refs的坑 在开发中,有时需要使用到this.$refs ,用于操作真实的DOM节点. 说一说我在使用的时候,在开发时碰到了一个小需求,需要子组件向父组件传参,而且是不需要通过事件传递的,一开始使用this.$emit()来写的,但是一直没有接受到参数,于是放弃了使用this.$emit()的使用. 于是,使用了在父组件中调用子组件的方法,来获取传递的参数.但是还是没有获取

随机推荐