inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <a-tooltip placement="top">
3     <template slot="title">
4       <span>导出所有数据</span>
5     </template>
6     <!-- 正常来说,这里加个插槽最好了,但是这个就是为导出准备的,一般这两个字不会变 -->
7     <a-button type="dashed" @click="batchExport" :loading="batchExportLoading"><a-icon type="export"/>导出</a-button>
8   </a-tooltip>
9 </template>
10
11 <script>
12 export default {
13   name: 'XDown',
14   data () {
15     return {
16       batchExportLoading: false
17     }
18   },
19   methods: {
20     /**
21      * 本控件中点击按钮事件
22      */
23     batchExport () {
24       this.batchExportLoading = true
25       // 将其传达到上个界面
26       this.$emit('batchExport', '')
27     },
28
29     /**
30      * 通过返回的元素通过浏览器下载
31      * 也就是接受使用这个组件的地方吧下载的内容传过来,
32      * 但是这个组件本公子编写的时候只想的适用于导出excel来使用,下载文件呀图片方面的重新整个组件即可
33      */
34     downloadfile (res) {
35       this.batchExportLoading = false
36       var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
37       var contentDisposition = res.headers['content-disposition']
38       var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
39       var result = patt.exec(contentDisposition)
40       var filename = result[1]
41       var downloadElement = document.createElement('a')
42       var href = window.URL.createObjectURL(blob) // 创建下载的链接
43       var reg = /^["](.*)["]$/g
44       downloadElement.style.display = 'none'
45       downloadElement.href = href
46       downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
47       document.body.appendChild(downloadElement)
48       downloadElement.click() // 点击下载
49       document.body.removeChild(downloadElement) // 下载完成移除元素
50       window.URL.revokeObjectURL(href)
51     }
52   }
53 }
54 </script>