【Vue】axios发请求下载excel--20230630

这篇具有很好参考价值的文章主要介绍了【Vue】axios发请求下载excel--20230630。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.关键点:

  • blob
  • 乱码
  • 传参

2.参考资料:处理blob文件流和乱码问题

https://blog.csdn.net/qq_41512902/article/details/125680531
【Vue】axios发请求下载excel--20230630,Vue,vue.js,excel,前端

https://blog.csdn.net/qq_38804584/article/details/109238794
【Vue】axios发请求下载excel--20230630,Vue,vue.js,excel,前端

3.我的代码:axios发请求下载excel

js代码

    download_dlt_report(method,url,data,headers){
      axios({
          method: "post",
          url: 'https://dltapi.wistron.com/dlt/skillcard/download', // 请求地址
          data:{
            "plantCode":"P1",
            "currentPage": 1,
            "pageSize": 10
          },
          headers:{
              'Content-Type': 'application/json',
              'Authorization': "Bearer ********************************************",
          },
          responseType: "blob" // 表明返回服务器返回的数据类型
          // responseType: "arraybuffer",
        }).then(
          (response) => {
            console.log('response',response)
            let fileName = "skillcard" + Date.parse(new Date()) + ".xlsx";
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(response, fileName);
            } else {
              let link = document.createElement("a");
              link.href = window.URL.createObjectURL(new Blob([response.data],{type: "application/vnd.ms-excel"}));
              link.download = fileName;
              link.click();
              window.URL.revokeObjectURL(link.href);
            }
          },
          (err) => {
            reject(err);
          }
        );
    },

【Vue】axios发请求下载excel--20230630,Vue,vue.js,excel,前端文章来源地址https://www.toymoban.com/news/detail-516369.html

到了这里,关于【Vue】axios发请求下载excel--20230630的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

    axios封装-我常用的请求头参数  application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正常。前端页面正常跳转。 2.后端设置为post请求,前端a

    2024年02月02日
    浏览(50)
  • 前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年02月03日
    浏览(50)
  • 基于Vue、Axios、Node.js的图书管理系统【网页前端高级编程】

    本图书管理系统是基于Vue、Ajax、Node.js等技术的管理系统,笔者给其命名为阳光图书管理系统,意味着我们这个年纪应该活得洒脱像阳光一样,应充满活力与信心。再此感谢老师朋友的悉心指导,由于此系统是笔者初次完成的一个小型管理系统,必定有许多纰漏,如有不足请指正。

    2024年02月09日
    浏览(157)
  • #vue3 实现前端下载excel文件模板功能

    一、需求: 前端无需通过后端接口,即可实现模板下载功能。 通过构造一个 JSON 对象,使用前端常用的 第三方库 xlsx ,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板 二、效果: 三、源码如下:

    2024年01月19日
    浏览(70)
  • vue实现excel数据下载,后端提供的list由前端转excel并下载

    前言,因为项目需求需要,我们需要把后端传来的list转成excel模板,并且下载下来) 之前有用的插件,但是会有少0的情况,如下  所以采用另一个项目用过的方法,最终完美实现效果,如下:  1,首先我们来看下后端提供的数据结构 2,具体前端代码如下 封装的组件,需要的同学直接copy就行

    2024年02月16日
    浏览(50)
  • 【前端】Vue中引入excel模板并下载以及XLSX使用

    模板存放位置 src/assets/excelTemplate/模板.xls 安装模块包 新增配置,在vue.config.js中,自己比较一下,最后一段新增的chainWebpack 即可将模板下载到本地 我使用XLSX的场景,在我上传excel的时候,我需要获取它的表头以及里面的数据进行渲染到表格中,在我编辑的时候需要请求Exce

    2024年02月21日
    浏览(48)
  • vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求:后端不想写下载,导入和导出的接口,让我们前端自己实现。 这里我们就可以用xlsx插件来实现,我们不多说了,先放一下实现的图片,下面我们分别把模版下载、导入和导出的代码放上来,想用的话,直接复制粘贴即可! 模版下载图片 导出图片: 好了,下面我

    2024年02月13日
    浏览(61)
  • vue如何通过$http的post方法请求下载二进制的Excel文件

    使用此function 使用此function, test.vue instanceName: \\\"exportExcel\\\",导出excel文件 instanceName: \\\"downloadLog\\\",下载.log后缀的txt文件 封装接口 代码中使用:

    2024年01月18日
    浏览(56)
  • vue纯前端实现下载excel文件,本地和测试环境都可正常下载

    vue2纯前端实现下载excel文件,本地和测试环境都可正常下载。 1、把后端给的excel文件放到本地项目文件夹中,位置如图所示: 2、在需要展示下载功能的页面中引入该excel文件,如图所示: 3、使用a链接,href绑定引入的excel文件路径,并添加download属性,download属性值就是下载

    2024年02月13日
    浏览(56)
  • vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑

    a标签的下载功能: 1:bobl ----二进制流文件 Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据 2:responseType responseType它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以要把它设为‘blob’ 通过设置responseType为blo

    2024年02月02日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包