feat: 内置报告下载预览功能

src/components/table/report/builtinReportTable.vue

@@ -59,10 +59,10 @@
     </el-table-column>
   </el-table>
   <div class="table-operation-all">
-    <el-checkbox v-model="checkbox" @change="builtinReportCheckbox"></el-checkbox>
+    <el-checkbox v-model="checkboxAll" @change="builtinReportCheckbox"></el-checkbox>
     <div class="table-operation-all-span">
       <span>{{ $t('overall.all') }}</span>
-      <span :disabled="downloadAgentFlag" :class="{'table-operation-all-checkbox': checkbox}" @click="batchDownload">{{$t('report.batchDow')}}</span>
+      <span :class="{'table-operation-all-checkbox': checkboxAll}" @click="batchDownload">{{$t('report.batchDow')}}</span>
     </div>
   </div>
 </template>
@@ -70,6 +70,7 @@
 <script>
 import table from '@/mixins/table'
 import { get } from '@/utils/http'
+import axios from 'axios'
 export default {
   name: 'builtinReportTable',
   mixins: [table],
@@ -99,8 +100,7 @@ export default {
           show: true
         }
       ],
-      checkbox: false,
-      downloadAgentFlag: false,
+      checkboxAll: false,
       checkboxIds: '',
       builtinId: ''
     }
@@ -109,9 +109,9 @@ export default {
     select (objs) {
       this.checkboxIds = objs.map(item => { return item.id }).join(',')
       if (objs.length > 0) {
-        this.checkbox = true
+        this.checkboxAll = true
       } else {
-        this.checkbox = false
+        this.checkboxAll = false
       }
     },
     builtinReportCheckbox (objs) {
@@ -123,32 +123,53 @@ export default {
       console.log(objs)
     },
     batchDownload: function () {
-      this.downloadAgentFlag = true
-      get('/report/job/batchDownloadPdf', { ids: this.checkboxIds }).then(data => {
-        this.downloadAgentFlag = false
-        let fileName = 'confagent'
-        const disposition = data.headers['content-disposition']
-        if (disposition) {
-          fileName = disposition.split(';')[1].split('filename=')[1]
-        }
-        // 由于ie不支持download属性，故需要做兼容判断
-        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-          // ie独有的msSaveBlob属性，data.data为Blob文件流
-          window.navigator.msSaveBlob(data.data, fileName)
+      const fileName = 'builtinReport' + '-' + this.getTimeString() + '.zip'
+      const params = {
+        ids: this.checkboxIds
+      }
+      axios.get('/report/job/batchDownloadPdf', { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
         } else {
-          // 以下流程即为文章开始的下载流程
-          const url = window.URL.createObjectURL(data.data)
-          const link = document.createElement('a')
-          link.style.display = 'none'
-          link.href = url
-          link.download = fileName
-          document.body.appendChild(link)
-          link.click()
-          window.URL.revokeObjectURL(link.href)
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
         }
-      }).catch(() => {
-        this.downloadAgentFlag = false
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
       })
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
     }
   }
 }