【动态创建a标签实现blob文件下载】【fiel文件上传】

  • template
 1 <template>
 2   <div class="batchImportShell">
 3     <div class="batchImport">
 4       <i class="close el-icon-close" @click="closeView()"></i>
 5       <h2>批量导入</h2>
 6       <form action="/account/meetLife/addBatchTheCardInformation" id="fileForm">
 7         <input type="file" id="fileUp" class="file" ref="fileUp" name="file" @change="textChange($event)">
 8       </form>
 9       <label for="fileUp" class="batchImportLabel" :class="{'error':errorCls}">
10         <dl>
11           <dt><i class="el-icon-upload"></i></dt>
12           <dd>{{text}}</dd>
13         </dl>
14       </label>
15       <div class="batchImportBtnBox">
16         <button class="batchImportBtn" @click="downFile()"><i></i>模板下载</button>
17         <button class="batchImportBtn red" @click="fileErrorDown()" v-show="errorData"><i></i>错误文件下载</button>
18         <button class="batchImportSave fr" :class="{'none':noneBtn}" @click="fileSave()">保存</button>
19         <button class="batchImportBtn fr" @click="closeView()">取消</button>
20       </div>
21     </div>
22   </div>
23 </template>
  • data
 1     data () {
 2       return {
 3         noneBtn: true,
 4         text: '',
 5         textTip: {
 6           'defult': '点击上传电动自行车数据',
 7           'tip': '文档格式有误，请重新上传',
 8           'error': '文档格式有误，请重新上传'
 9         },
10         backCode: {
11           '1003': '超过1000条',
12           '1004': '文件不允许为空',
13           '1005': '数据操作异常，存表失败',
14           '1006': '校验不通过，根据下载文档进行修改',
15           '1007': '文件格式异常',
16           '1008': '系统异常',
17           '0001': '批量导入成功'
18         },
19         errorCls: false,
20         fileType: {
21           'xls': 'application/vnd.ms-excel',
22           'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
23         },
24         errorData: '',
25         reset: false
26       }
27     },
  • 添加文件
  • input标签的changge事件，在添加文件的时候触发
 1       textChange (e) {
 2         let vm = this
 3         vm.errorCls = false
 4         vm.errorData = false
 5         if (e.target.files[0].name && (e.target.files[0].name.split('.')[1] === 'xls' || e.target.files[0].name.split('.')[1] === 'xlsx')) {
 6           vm.text = e.target.files[0].name
 7           vm.noneBtn = false
 8           vm.reset = true
 9         } else {
10           vm.text = vm.textTip['tip'];
11           vm.reset = false
12         }
13       },
  • 上传文件
 1       fileSave () {
 2         let vm = this
 3         if ((!vm.noneBtn) && vm.reset) {
 4           addBatchTheCardInformationCheck({
 5             'file': vm.$refs['fileUp'].files[0]
 6           }).then((res) => {
 7             debugger
 8             if (res.data.code === 'SUC_0001') {
 9               vm.alertMsg('success', '上传成功')
10             } else if (res.data.code === 'ERR_1007') {
11               vm.fileError()
12               vm.errorData = res.data.data
13               // vm.$refs['fileForm'].reset()
14               document.getElementById('fileForm').reset()
15             } else {
16               vm.fileError()
17               vm.errorData = res.data.data
18             }
19           })
20         }
21       },
  • 下载文件
 1       fileErrorDown () {
 2         let vm = this
 3         addBatchTheCardInformation({ 'frameNoCellon': vm.errorData }).then(res => {
 4           let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });

// 动态创建a标签实现blob文件下载
 5           let elink = document.createElement('a');
 6           elink.download = 'ImportTemplatesInBulk.xls';
 7           elink.style.display = 'none';
 8           elink.href = URL.createObjectURL(blob);
 9           document.body.appendChild(elink);
10           elink.click();
11           document.body.removeChild(elink);
12         })
13       },

 

posted @ 2021-01-08 17:16  行屰  阅读(419)  评论(0)    收藏  举报