組件封裝

<template>
  <div>
    <el-button
      v-if="importUrl"
      type="success"
      @click="importFile"
    >導(dǎo)入</el-button>
    <el-button
      v-if="exportUrl"
      type="success"
      @click="exportFile"
    >導(dǎo)出</el-button>
    <el-dialog
      title="導(dǎo)入 excel 提示"
      :visible.sync="DialogVisible"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <span>如果沒有模版請先下載模版</span>
      <span slot="footer" class="dialog-footer">
        <el-button style="margin-bottom: 15px" @click="download()">
          下載模板
        </el-button>
        <el-upload
          ref="upload"
          type="primary"
          action="#"
          :http-request="beforeUploadAdd"
        >
          <el-button type="primary">繼續(xù)導(dǎo)入</el-button>
        </el-upload>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAccessToken } from "@/utils/auth";
import { ImportExcel, ExportExcel } from '@/api/exportAndImport/exportAndImport'

export default {
  props: {
    importUrl: {
      type: String,
      default: ''
    },
    exportUrl: {
      type: String,
      default: ''
    },
    importCode: {
      type: String,
      default: ''
    },
    exportCode: {
      type: String,
      default: ''
    },
    pam: {
      type: Object,
      default: function() {}
    },
    moduleUrl: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      DialogVisible: false,      
      headers: { Authorization: "Bearer " + getAccessToken() }, // 設(shè)置上傳的請求頭部      
      baseUrl: process.env.VUE_APP_BASE_API,
    }
  },
  methods: {
    async beforeUploadAdd(obj) {
      try {
        const fd = new FormData()
        fd.append('file', obj.file)
        const { code, data } = await ImportExcel(this.importUrl, fd)
        if (code === 200 && !data) {
          this.$message({
            type: 'success',
            message: '導(dǎo)入成功!'
          })
          this.$emit('reload')
        } else if (code === 200 && data) {
          this.$message({
            type: 'error',
            message: '導(dǎo)入失敗!'
          })
          this.downloadError(data)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.DialogVisible = false
      }
    },

    downloadError(data) {
      this.DialogVisible = false
      const val = this.baseUrl + `${data}`
      var a = document.createElement('a')
      a.href = val
      a.click()
    },
    // 下載模板
    download() {
      const val = this.baseUrl + `${this.moduleUrl}`
      
      // token下載方式（不帶請求頭）
      // const token = getAccessToken()
      // this.DialogVisible = false
      // const val = this.baseUrl + `${this.moduleUrl}?token=${token}`
      // var a = document.createElement('a')
      // a.href = val
      // a.download = 'bidModel.xls'
      // a.click()

	//攜帶請求頭下載方式
      fetch(val, {
          method: 'GET',
          // headers: new Headers({
          //   //自己加的頭信息全都要轉(zhuǎn)成string
          //   id: xxxx.toString(),
          //   'ACCESS-TOKEN': window.localStorage.getItem('ACCESS-TOKEN') as string,
          // }),
          headers: this.headers
       })
      .then(res => res.blob())
      .then(data => {
        const blobUrl = window.URL.createObjectURL(data);
        this.downloadFile(blobUrl);
      });
    },

    downloadFile(blobUrl) {
      const a = document.createElement('a');
      a.download = 'bidModel.xls';
      a.href = blobUrl;
      a.click();
    },
    async importFile() {
      this.DialogVisible = true
    },
    // 導(dǎo)出所有項目
    async exportFile() {
      try {
        const { code, data } = await ExportExcel(this.exportUrl, this.pam)
        if (code === 200) {
          const dom = document.createElement('a')
          dom.href = this.baseUrl + data
          dom.style.display = 'none'
          document.body.appendChild(dom)
          dom.click()
          dom.parentNode.removeChild(dom)
        }
      } catch (error) {
        console.error(error)
      }
    }
  }
}
// auth.js
// export function getAccessToken() {
//    return localStorage.getItem(AccessTokenKey)
// }
</script>

頁面引入

<ExportAndImport
   export-url="導(dǎo)出接口地址"
   import-url="導(dǎo)入接口地址"
   module-url="模板下載接口地址"
   :pam="參數(shù)obj"
   @reload="導(dǎo)入后獲取列表方法"
 />

文章來源地址http://www.zghlxwxcb.cn/news/detail-613600.html

到了這里，關(guān)于前端項目之導(dǎo)入、導(dǎo)出、下載模板的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！