2021-05-31

Vue使用element组件进行导入和导出文档

先看HTML部分：

<!-- 导入弹框start -->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible2"
        :close-on-click-modal="false"
      >
        <el-form :model="importform">
          <el-form-item class="box111" label="导入上传" :label-width="LabelWidth">
            <el-upload
              class="upload-demo"
              action="crm/knowledge-book/book-import"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :before-upload="beforeAvatarUpload2"
              :http-request="fileUpload2"
            >
              <el-button size="mini" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传csv格式文件</div>
            </el-upload>
            <el-button class="daochu" size="mini" type="primary" @click="getAssistantAll()">点击导出</el-button>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="noShow()">取 消</el-button>
          <el-button size="small" type="primary" @click="importAssistantAll()">确 定</el-button>
          <!-- <el-button size="small" type="primary" @click="exportCsv()">确 定</el-button> -->
        </div>
      </el-dialog>
      <!-- 导入弹框end -->

1导出文档操作
导出文档就是说要把填写数据的模板导出来，我这里是就导出了模板的列表头部

getAssistantAll() {
      getKnowledgeInter().then(res => {
        console.log(res)
        if (res) {
          let data = 'data:text/csv;charset=utf-8,\ufeff' + res
          let link = document.createElement('a')
          link.setAttribute('href', data)
          link.setAttribute('download', '客户导入' + '.csv')
          link.click()
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          })
        }
      })
    }

2 导入文档操作，文档导入之前不许为空，这里我没有设置，大佬们可以自行设置一下
请看代码：

    // 新的导入
    importAssistantAll() {
      if (this.fileList !== undefined) {
        this.importform.path = this.fileList.url // 上传-文件保存路径
      }
      getKnowledgeImport(this.importform).then(res => {
        console.log(res)
        if (res) {
          console.log(res)
          if (res.code == 200) {
            // 成功提示
            this.$message({
              showClose: true,
              message: '导入成功',
              type: 'success'
            })
            // 刷新数据
            this.getKnowledgeDataList()
            // 隐藏弹窗
            this.dialogFormVisible2 = false
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            })
          }
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          })
        }
      })
    }