vue實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出操作示例

更新時(shí)間：2023年07月18日 14:02:40 作者：Smith

這篇文章主要為大家介紹了vue實(shí)現(xiàn)excel文件的導(dǎo)入導(dǎo)出實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前端對execl文件數(shù)據(jù)進(jìn)行處理

實(shí)現(xiàn)導(dǎo)入execl文件處理完成后導(dǎo)出execl文件

庫地址

https://www.npmjs.com/package/@d2-projects/vue-table-import

https://www.npmjs.com/package/@d2-projects/vue-table-export

下載到自己項(xiàng)目

npm i @d2-projects/vue-table-export
npm i @d2-projects/vue-table-import

項(xiàng)目中引入

我一般這種多個(gè)地方用到的就全局引入

import pluginImport from '@d2-projects/vue-table-import'
Vue.use(pluginImport)
import pluginExport from "@d2-projects/vue-table-export";
Vue.use(pluginExport);

導(dǎo)入execl

<template>
  <div>
    <el-upload :before-upload="handleUpload" action="上傳地址">
      <el-button >點(diǎn)擊導(dǎo)入execl表格</el-button>
    </el-upload>
  </div>
</template>
<script> 
export default {
  data() {
    return {
      table: {
        columns: [],
        data: [],
      },
    };
  },
  methods: {
    handleUpload(file) {
      this.$import.xlsx(file).then(({ header, results }) => {
       // header, results是返回的參數(shù) 打印看下
      });
    }
  },
};
</script>
<style>
</style>

導(dǎo)出execl

<template>
  <div>
    <el-button @click="exportFile" >
      <el-icon name="download" />導(dǎo)出為 Excel
    </el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      table: {
        columns: [],
        data: []
      }
    }
  },
  methods: {
    exportFile() {
      this.$export.excel({
        columns: this.table.columns,
        data: this.table.data
      }).then(() => {
        this.$message('導(dǎo)出成功')
      })
    }
  }
}
</script>
<style>
</style>

至此完成

以上就是vue實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出的詳細(xì)內(nèi)容，更多關(guān)于vue導(dǎo)入導(dǎo)出excel的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)簡單彈窗效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
一文詳解如何創(chuàng)建Vue3項(xiàng)目及組合式API
Vue3提供了一種組合式API,可以用來構(gòu)建可復(fù)用的組件和應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建Vue3項(xiàng)目及組合式API的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下
2023-04-04
Pinia進(jìn)階setup函數(shù)式寫法封裝到企業(yè)項(xiàng)目
這篇文章主要為大家介紹了Pinia進(jìn)階setup函數(shù)式寫法封裝到企業(yè)項(xiàng)目實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
el-date-picker如何篩選時(shí)間日期選擇范圍
這篇文章主要介紹了el-date-picker篩選時(shí)間日期選擇范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-12-12
vue component 中引入less文件報(bào)錯(cuò) Module build failed
這篇文章主要介紹了vue component 中引入less文件報(bào)錯(cuò) Module build failed的解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
基于Vue實(shí)現(xiàn)我的錢包充值功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實(shí)現(xiàn)我的錢包充值功能,文中的示例代碼簡潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2024-01-01
vue?v-for中key的原理詳析
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時(shí)候,并不會去改變原有的元素和數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下
2022-04-04
vue做網(wǎng)頁開場視頻的實(shí)例代碼
這篇文章主要介紹了vue做網(wǎng)頁開場視頻的實(shí)例代碼,需要的朋友可以參考下
2017-10-10
Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的示例代碼
在當(dāng)今數(shù)字化的時(shí)代,用戶體驗(yàn)的優(yōu)化至關(guān)重要,物流信息的展示作為電商和供應(yīng)鏈領(lǐng)域中的關(guān)鍵環(huán)節(jié),其呈現(xiàn)方式直接影響著用戶對貨物運(yùn)輸狀態(tài)的感知和滿意度,所以本文介紹了Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的方法,需要的朋友可以參考下
2024-08-08