تحقيق وظيفة الاستيراد والتصدير البسيطة باستخدام vue + element-ui

مقدمة

من المعروف أن ElementUI هو مكتبة UI شاملة، ولكن يتطلب استخدامها بعض الأساسيات في Vue. قبل بدء نص المقال، لنلقي نظرة على طريقة التثبيت أولاً.

تثبيت مكتبة ElementUI

cnpm install element-ui -S

تضمينها في ملف main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

التثبيت العالمي

Vue.use(ElementUI)

تذكر إعادة تشغيل البرنامج بعد التثبيت، اكتب cnpm run dev، الآن يمكنك استخدام elementUI مباشرة.

وظيفة الاستيراد والتصدير لـ vue + element-ui

1.في نظام إدارة الموقع الأمامي، عادة ما يتم عرض البيانات باستخدام جدول، والجدول يتضمن الاستيراد والتصدير;

2.يستخدم الاستيراد عن طريق مكون Upload الخاص بـ element-ui;

3.يستخدم التصدير كوبيه من نوع file; يتم الحصول على البيانات من واجهة الخادم، ثم يتم استنساخ كوبيه باستخدام البيانات، ويتم ربطه بمسار الكوبيه باستخدام خاصية href من علامة a
 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   ,
   responseType: 'arraybuffer'
  }).then((response) => {
   //إنشاء blob object، نوع من file
   let blob = new Blob([response.data], { type: 'application/x-xls' })
   let link = document.createElement('a')
   link.href = window.URL.createObjectURL(blob)
   //إعداد اسم ملف التحميل
   link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'
   link.click()
  }
 }
4.ضع كود الصغير بالكامل في المثال، يمكنك استخدامها مباشرة في التطوير الخلفي (ملف vue)
<template>
<div>
 <el-table
 ref="multipleTable"
 :data="tableData3"
 tooltip-effect="dark"
 border
 style="width: 80%"
 @selection-change="handleSelectionChange">
 
 
 
  
 
 
 
 
 
 
 

 切换第二、第三行的选中状态
 取消选择
 导入
 导出
 </div>
 
 
  

  
5.js文件,调用接口
import axios from 'axios'
// 下载模板
 export const downloadTemplate = function (scheduleType) {
  axios.get('/rest/schedule/template', {
   params: {
    "scheduleType": scheduleType
   ,
   responseType: 'arraybuffer'
  }).then((response) => {
   //إنشاء blob object، نوع من file
   let blob = new Blob([response.data], { type: 'application/x-xls' })
   let link = document.createElement('a')
   link.href = window.URL.createObjectURL(blob)
   link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'
   link.click()
  }
 }
الخاتمة
هذا هو نهاية محتوى هذا المقال، نأمل أن يكون محتوى هذا المقال له قيمة مرجعية لتعلم أو عمل الجميع، إذا كان لديك أي أسئلة، يمكنك ترك تعليق للتواصل، شكرًا لدعمك لتعليم النفخ.

		
البيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق لصاحب الحقوق أن يكون مالكًا، يتم جمع المحتوى من قبل المستخدمين عبر الإنترنت الذين يقدمون المساهمات ويتم تحميلها بشكل مستقل، لا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) للإبلاغ، وتقديم الدليل المتعلق، وستقوم الموقع فورًا بإزالة المحتوى المزعوم.