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中modal传输数据并刷新部分页面数据方式

    vue中modal传输数据并刷新部分页面数据方式

    这篇文章主要介绍了vue中modal传输数据并刷新部分页面数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue-router如何实现路由懒加载

    Vue-router如何实现路由懒加载

    在现代前端开发中,Vue.js凭借其轻量级和易用性,成为了很多开发者的首选框架,本文将结合实际案例,详细讲解Vue-Router路由懒加载的用法,需要的可以参考下
    2024-11-11
  • Vue draggable实现从左到右拖拽功能

    Vue draggable实现从左到右拖拽功能

    这篇文章主要为大家详细介绍了Vue draggable实现从左到右拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 浅谈vuex 闲置状态重置方案

    浅谈vuex 闲置状态重置方案

    本篇文章主要介绍了vuex 闲置状态重置方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue cli 3.x 项目部署到 github pages的方法

    vue cli 3.x 项目部署到 github pages的方法

    这篇文章主要介绍了vue cli 3.x 项目部署到 github pages的方法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • 使用vite创建vue3项目的详细图文教程

    使用vite创建vue3项目的详细图文教程

    创建Vue3项目有两种常见的方式,一种是想vue2版本一样使用脚手架工具创建,创建vue3项目的脚手架必须是4版本以上的,另一种方法就是使用vite创建,这篇文章主要给大家介绍了关于如何使用vite创建vue3项目的相关资料,需要的朋友可以参考下
    2022-11-11
  • VueJs里利用CryptoJs实现加密及解密的方法示例

    VueJs里利用CryptoJs实现加密及解密的方法示例

    这篇文章主要介绍了VueJs里利用CryptoJs实现加密及解密的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • VUE表达式{{}}中如何拼接字符

    VUE表达式{{}}中如何拼接字符

    这篇文章主要介绍了VUE表达式{{}}中如何拼接字符问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决

    vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决

    在 Vue 中使用 ECharts 组件时,遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因,所以本文给大家介绍了vue中使用echarts刷新可以正常渲染但路由跳转不显示问题的解决方法,需要的朋友可以参考下
    2024-02-02
  • vue-drag-chart 拖动/缩放图表组件的实例代码

    vue-drag-chart 拖动/缩放图表组件的实例代码

    这篇文章主要介绍了vue-drag-chart 拖动/缩放的图表组件的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论