精华内容
下载资源
问答
  • vue导出excel文件损坏
    千次阅读
    2021-06-18 11:17:51

    vue从后台导出二进制流, 下载后提示文件损坏

    导出时需要注意返回的数据一定要是二进制流, 使用以下代码导出返回流

    export function downloadFile(obj, name, suffix = "xlsx") {
      const url = window.URL.createObjectURL(new Blob([obj], {type: "application/vnd.ms-excel"}))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      const fileName = name + '-' + parseTime(new Date()) + '.' + suffix
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    

    按照以上方式导出出现文件损坏提示, 原因是请求时少了请求头responseType: ‘blob’
    在这里插入图片描述

    加上请求头即可

    更多相关内容
  • VUE导出Excel文件.rar

    2020-06-02 15:15:08
    VUE导出Excel文件,两种方法,方法二带样式:文字居中,自动换行,列宽设置,单元格合并,冻结表头等。 https://www.cnblogs.com/yinxingen/p/11052184.html
  • vue导出excel并修改表头样式(请先阅读readme) 安装npm install 执行npm run serve
  • SheetJS免费版的不支持格式,比如居中、自动换行都不行。xlsx-style是SheetJS的一个分支,且支持各种格式,可以做到文字居中,自动换行,列宽设置,单元格合并,冻结表头等。
  • vue+elementui导出excel的相关js,,导入导出的函数具体看我的其他文章。
  • vue.js需要导出Excel文件时,需要的Blob.js和Export2Excel.js.
  • vue + ant-design-vue导出Excel文件

    千次阅读 2020-10-09 17:18:20
    //点击导出 exportData(){ this.isLoading = true if(!this.startTime || !this.endTime){ this.$message.warning("请选择开始和结束时间") } else { console.log(this.startTime,this.endTime) httpUtil....

    1、使用blob 方式导出


    //点击导出
          exportData(){
            this.isLoading = true
            if(!this.startTime || !this.endTime){
              this.$message.warning("请选择开始和结束时间")
            } else {
              console.log(this.startTime,this.endTime)
              httpUtil.axiosHttp({
                url: `xxx.com`,
                params: {
                  startTime: this.startTime,
                  endTime: this.endTime
                },
                method: "get",
                'responseType': 'blob'//设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
              }).then((res) => {
                console.log(res)
                if(res.data.code == 20001){
                  this.$message.warning(res.data.message)
                } else  {
                  let fileName = '文件名.xls'
                  let tableData = res.data
                  let blob = new Blob([tableData])//创建Blob对象,Blob(blobParts[, options])blobParts: 数组类型, 数组中的每一项连接起来构成Blob对象的数据
                  let downloadElement = document.createElement('a')//创建dom
                  let href = window.URL.createObjectURL(blob) //创建下载链接
                  downloadElement.href = href
                  downloadElement.download = fileName //下载后文件名
                  document.body.appendChild(downloadElement)//添加创建的节点
                  downloadElement.click() //点击下载
                  document.body.removeChild(downloadElement) //下载完成移除元素
                  window.URL.revokeObjectURL(href) //释放掉blob对象
                  this.isLoading = false
                }
              }).catch((err) => {
                setTimeout(() => {
                  this.isLoading = false
                }, 500);
              })
            }
          },
    

    打印的数据:
    在这里插入图片描述

    导出到excel部分截图:
    在这里插入图片描述


    2、使用xlxs方式导出


    使用xlxs首先要安装:npm install xlsx

    我把导出封装在全局的js文件中的

    在这里插入图片描述

    使用

    接收2个参数:需要导出的数据,导出的文件名

    这种方式是把数据生成文件直接下载下来

    	//点击导出触发
        onClickExportTable() {
          //先获取需要导出的数据
          let { releseDatas } = this.$data;
          let exportArr = [["序号", "操作者", "操作时间"]];
          for (let i = 0; i < releseDatas.length; i++) {
            exportArr.push([
              releseDatas[i].id,
              releseDatas[i].user,
              releseDatas[i].useTime,
            ]);
          }
          Util.exportExcle(exportArr, "优惠券发放记录统计");
        },
    
    展开全文
  • vue导出excel文件流中文乱码

    千次阅读 2020-11-20 11:42:40
    //a标签的download属性规定下载文件的名称 linkNode.style.display = 'none'; linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL document.body.appendChild(linkNode); linkNode.click(); //模拟在...

     

    解决此方法很多网上的差不多都可以。一下提供简单的方法

     loads(){
    		  let data={
    			  userWord:this.dataList.userWord,
    			  examId:this.$route.query.id,
    			  exportType:this.active,
    		  }
    		api.exportUserResult(data).then((res) => {
    					const blob = new Blob([res.data]); 
                        const fileName = '考试成绩.xls';
                        const linkNode = document.createElement('a');
                        linkNode.download = fileName; //a标签的download属性规定下载文件的名称
                        linkNode.style.display = 'none';
                        linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
                        document.body.appendChild(linkNode);
                        linkNode.click();  //模拟在按钮上的一次鼠标单击
                        URL.revokeObjectURL(linkNode.href); // 释放URL 对象
                        document.body.removeChild(linkNode);
          });
    	  },

    注意填写

     

    另住拦截器,因为判断result,没在正确里返回,所以我直接返回

    展开全文
  • 需要携带参数获取数据再导出Excel 写法一: // 导出 handleExport (belongTime) { window.location.href = `${AddressUrl}/itemDetail?belongTime=${itemId}` }, process.env.VUE_APP_BASE_API=AddressUrl,为...

    需要携带参数获取数据再导出Excel
    写法一:

     // 导出
        handleExport (itemId) {
          window.location.href = `${AddressUrl}/itemDetail?itemId=${itemId}`
        },
    

    process.env.VUE_APP_BASE_API=AddressUrl,为基准路径。
    写法二:

       // 导出模板
        hanldeExport () {
         //api完整地址
          const url = `${process.env.VUE_APP_BASE_API}/itemList`
          //拼接url参数
          const param = '?brand=' + this.activeBrand + '&pageNum=' + this.pageNum + '&pageSize=' + 20 + '&size=' + this.activeSize + '&sortByPrice=' + this.sortByPrice + '&sortBySell=' + this.sortBySell + '&spec=' + this.spec
          // 创建一个a标签元素
          const a = document.createElement('a')
          // 给a标签设置链接属性
          a.href = url + param
          // 调用点击事件
          a.click()
        },
    

    不需要加参数就直接调用后台接口就好

     window.location.href = `${process.env.VUE_APP_BASE_API}/itemList`
    

    在这里插入图片描述

    展开全文
  • vue导出excel.zip

    2020-04-20 15:07:38
    vue导出excel 所需下载的两个js文件:Blob.js、Export2Excel.js 将上面两个js文件放在vendor目录中 在项目目录下的build下的 webpack.base/conf.js这个webpack的配置文件中的 resolve的alias中加入: 'vendor':path....
  • vue 导出 excel文件

    2020-08-21 11:14:57
    vue 导出excel文件 import { downloadBinary } from '@/utils/index' import axios from 'axios' // 导出文件xls export function downloadBinary(data, fileName="table.xls") { let blob = data; const reader ...
  • vue导出excel文件

    2021-01-08 19:46:38
    //条件查询并导出excel import request from '@/router/axios' export function exportData(data) { return request({ url: '/api/dutyUser/export', method: 'post', responseType:'blob', data: data, }) } ...
  • Vue 导出excel文件

    2020-03-30 22:24:55
    一般项目中导出excel表格一般是后端处理,前端调接口返回一个url地址,通过 window.open或创建a标签都可以实现下载功能。 但数据量小的时候可以由前端来导出。 下面介绍一下前端导出excel的方法: 使用 xlsx npm ...
  • vue导出Excel

    2022-04-04 10:54:36
    vue导出,复制即可使用。
  • Vue导出excel必备js文件

    2018-02-03 20:27:49
    blob与Export2Excell.这两个文件Vue导出excel必备js文件
  • vue实现导出的两个js文件-Blob+Export2
  • vue导入导出excel文件

    2019-04-16 09:00:39
    vue导入导出excel文件所需要用到的依赖文件,从网上转载而来,并非原创。大家需要可以从别处下载,这里下载需要积分,本人上传只是为了方便保存以供以后所用。
  • vue导出Excel表的js文件

    2020-12-28 15:33:02
    vue导出Excel表的js文件
  • 主要介绍了Vue实现导出excel表格的功能,在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下
  • 使用vue导出excel文件

    2020-12-23 07:05:48
    今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是现在我的想法是只是用数组数据,不接著与数据流的方式去...
  • vue.js需要导出Excel文件时,需要的Blob.js和Export2Excel.js
  • 下载模版 上传更新 methods: { beforeUpload(file) { let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { ...
  • Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的。 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。 所以你先需要安装...
  • 导出excel事件 /************导出文件**************/ exportData() { this.getCurrentTime() const getTimeExcel = this.getTimeExcel; //这里获取当前时间用来命名 if (this.curveModeCurveId == "" || this....
  • vue 导出excel文件

    2021-01-26 13:47:27
    vue 导出excel文件 一、安装 xlsx npm install xlsx -S 二、创建 excel.js import XLSX from 'xlsx' function autoWidthFunc (ws, data) { // set worksheet max width per col const colWidth = data.map(row =...
  • vue+element并使用xlsx实现导出excel
  • 项目中我们可能会碰到导出Excel文件的需求,这篇文章主要介绍了vue中导出Excel表格的实现代码,非常具有实用价值,需要的朋友可以参考下
  • springboot+vue导出excel

    2021-09-08 21:04:30
    springboot+vue导出excel 本文讲述springboot使用easypoi跟前端vue进行excel的导出 一、后台 1.easypoi依赖 <!--easypoi的支持包--> <dependency> <groupId>cn.afterturn</groupId> <...
  • 后端已经写好了导出Excel的接口,调用接口会发现后端返回的是二进制流文件 实现方法: 在封装接口时,给接口传递一个参数【 responseType: 'blob' 】 该参数是处理导出Excel表格数据乱码问题的关键 在页面中写...
  • 全栈架构师的前端Vue导出Excel笔记,网上很多代码会报错,内含Blob.js和Export2Excel.js代码,亲测可用!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,088
精华内容 2,435
关键字:

vue导出excel文件