快捷導(dǎo)航

vue使用js-file-download完成導(dǎo)出功能實(shí)例

更新時(shí)間：2024年07月18日 10:12:12 作者：五月呀

這篇文章主要介紹了vue使用js-file-download完成導(dǎo)出功能實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue使用js-file-download完成導(dǎo)出功能

安裝js-file-download

npm install js-file-download

引入對(duì)應(yīng)的功能模塊

import fileDownLoad from 'js-file-download'
import Axios from 'axios'//ajax請(qǐng)求
import store from '@/store'//設(shè)置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 = "點(diǎn)擊下載文本后生成的txt文件.txt";
      download(this.text, this.fileName, "text/plain");
    },
  },
  data() {
    return {
      text: "我愛(ài)你，中國(guó)！",
      fileName: "",
    };
  },
};
</script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中modal傳輸數(shù)據(jù)并刷新部分頁(yè)面數(shù)據(jù)方式
這篇文章主要介紹了vue中modal傳輸數(shù)據(jù)并刷新部分頁(yè)面數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue-router如何實(shí)現(xiàn)路由懶加載
在現(xiàn)代前端開發(fā)中,Vue.js憑借其輕量級(jí)和易用性,成為了很多開發(fā)者的首選框架,本文將結(jié)合實(shí)際案例,詳細(xì)講解Vue-Router路由懶加載的用法,需要的可以參考下
2024-11-11
Vue draggable實(shí)現(xiàn)從左到右拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue draggable實(shí)現(xiàn)從左到右拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
淺談vuex 閑置狀態(tài)重置方案
本篇文章主要介紹了vuex 閑置狀態(tài)重置方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue cli 3.x 項(xiàng)目部署到 github pages的方法
這篇文章主要介紹了vue cli 3.x 項(xiàng)目部署到 github pages的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04
使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
創(chuàng)建Vue3項(xiàng)目有兩種常見的方式,一種是想vue2版本一樣使用腳手架工具創(chuàng)建,創(chuàng)建vue3項(xiàng)目的腳手架必須是4版本以上的,另一種方法就是使用vite創(chuàng)建,這篇文章主要給大家介紹了關(guān)于如何使用vite創(chuàng)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2022-11-11
VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密的方法示例
這篇文章主要介紹了VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
VUE表達(dá)式{{}}中如何拼接字符
這篇文章主要介紹了VUE表達(dá)式{{}}中如何拼接字符問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示的問(wèn)題解決
在?Vue?中使用?ECharts?組件時(shí),遇到路由跳轉(zhuǎn)后圖表不顯示的問(wèn)題可能是因?yàn)榻M件銷毀和重新創(chuàng)建的原因,所以本文給大家介紹了vue中使用echarts刷新可以正常渲染但路由跳轉(zhuǎn)不顯示問(wèn)題的解決方法,需要的朋友可以參考下
2024-02-02
vue-drag-chart 拖動(dòng)/縮放圖表組件的實(shí)例代碼
這篇文章主要介紹了vue-drag-chart 拖動(dòng)/縮放的圖表組件的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04