| 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> | |
