vue使用js-file-download完成导出功能实例

 更新时间:2024年07月18日 10:12:12   作者:五月呀  
这篇文章主要介绍了vue使用js-file-download完成导出功能实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue使用js-file-download完成导出功能

安装js-file-download

npm install js-file-download

引入对应的功能模块

import fileDownLoad from 'js-file-download'
import Axios from 'axios'//ajax请求
import store from '@/store'//设置token

代码段

exportData(){
        var _this = this
        Axios({
          url:'ajax url'
          method: 'post',
          headers: {
           'Authorization': token
          },
          data:{
            licenseNo:_this.searchForm.licenseNo,
          },
          responseType: 'blob',
          }).then(res => {
             fileDownload(res.data, new Date().getTime()+ '.xlsx');
          })
      }

vue下载插件downloadjs

安装依赖

npm install downloadjs

使用范例

<template>
  <div style="margin:20px">
    <button @click="downloadText">下载文本——“{{ text }}”</button>
  </div>
</template>

<script>
import download from "downloadjs";
export default {
  methods: {
    downloadText() {
      this.fileName = "点击下载文本后生成的txt文件.txt";
      download(this.text, this.fileName, "text/plain");
    },
  },
  data() {
    return {
      text: "我爱你,中国!",
      fileName: "",
    };
  },
};
</script>

总结

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

相关文章

  • 浅谈vue中组件绑定事件时是否加.native

    浅谈vue中组件绑定事件时是否加.native

    今天小编就为大家分享一篇浅谈vue中组件绑定事件时是否加.native,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue @ ~ 相对路径 路径别名设置方式

    vue @ ~ 相对路径 路径别名设置方式

    这篇文章主要介绍了vue @ ~ 相对路径 路径别名设置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue滚动轴插件better-scroll使用详解

    vue滚动轴插件better-scroll使用详解

    这篇文章主要为大家详细介绍了vue滚动轴插件better-scroll的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue scoped与深度选择器deep的原理分析

    vue scoped与深度选择器deep的原理分析

    这篇文章主要介绍了vue scoped与深度选择器deep的原理分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue语法之render函数和jsx的基本使用

    vue语法之render函数和jsx的基本使用

    这篇文章主要介绍了vue语法之render函数和jsx的基本使用,在Vue中是支持jsx的,凡是我们是比较少在Vue中使用jsx的,jsx在react中使用的更加广泛,因此在这里我简单介绍一下jsx的基本使用,需要的朋友可以参考下
    2022-08-08
  • Vue.js常用指令汇总(v-if、v-for等)

    Vue.js常用指令汇总(v-if、v-for等)

    这篇文章主要为大家详细汇总了Vue.js常用指令及使用方法,包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 一文详解vue各种权限控制与管理实现思路

    一文详解vue各种权限控制与管理实现思路

    这篇文章主要为大家介绍了vue各种权限控制与管理的实现思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue插件v-touch的坑及解决(不能上下滑动)

    vue插件v-touch的坑及解决(不能上下滑动)

    这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 详解如何在vue+element-ui的项目中封装dialog组件

    详解如何在vue+element-ui的项目中封装dialog组件

    这篇文章主要介绍了详解如何在vue+element-ui的项目中封装dialog组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 详解vue开发中调用微信jssdk的问题

    详解vue开发中调用微信jssdk的问题

    这篇文章主要介绍了vue开发中调用微信jssdk的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论