首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 使用js-file-download完成导出功能

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

2024-07-18 10:11:13 作者：五月呀

这篇文章主要介绍了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>

总结

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