• vue下载文件时显示进度条

    1.单个下载（开始是导出按钮 下载显示进度条）

    html

    1.  <el-button @click.stop="exportReport(scope.row, scope.index)" 
    2.     v-if="!scope.row.schedule" icon="el-icon-download"
    3.      size="small" type="text"style="color: #409eff">导出报告
    4.  el-button>
    5.  <el-progress style="width: 60px;display:inline-block;margin-left: 20px;" 
    6.       v-else :text-inside="true" :stroke-width="20" 
    7.        :percentage="scope.row.scheduleNumber" status="success" />

     因为接口没有返回schedule和scheduleNumber数据只是前端需要 用来判断显示 按钮还是进度条的所以就手动给数组添加响应式数据

    1.      this.data.map((item, index) => {
    2.         this.$set(item, 'schedule', false);
    3.         this.$set(item, 'scheduleNumber', 0);
    4.         return item;
    5.       });

    js部分

    1.   exportReport(row) {
    2.       let data=this.visible?this.selectionList:this.data
    3.     // 自己封装的方法
    4.       downloadGet('/api/blade-robot/siteInfo/export-template','巡检报告', this.schedule, row).then(() => {
    5.         data.forEach((x) => {
    6.           if (x.id === row.id) {
    7.             x.schedule = false
    8.           }
    9.         })
    10.       })
    11.     },
    12.     schedule(progressEvent, row) {
    13.     // 回调的progressEvent参数里有一个progressEvent.loaded和progressEvent.total两个参数，分别意思为已下载的文件大小和总文件大小
    14.     // 因为total一直为0，经研究发现需要后端传给我ContentLength到response里这个值才会有值
    15.     // 然而又发现后端使用的是minio这个文件服务器，所以这个文件大小太难获取了，所以我决定不改后端，直接写死了文件大小
    16.     setTimeout(() => {
    17.       let data=this.visible?this.selectionList:this.data
    18.       data.forEach((x) => {
    19.         if (x.id === row.id) {
    20.             x.schedule = true
    21.             x.scheduleNumber = Math.round(progressEvent.loaded / 3715 * 100)
    22.             if( x.schedule == true){
    23.               setTimeout(() => {
    24.                  x.schedule = false
    25.               }, 2000);
    26.             }
    27.         }
    28.       })
    29.     }, 2000);
    30.     },

     downloadGet方法

    1. export const downloadGet = (url, filename, callback, callbackParameter)=> {
    2.   return request({
    3.     url:url, 
    4.     method: 'get',
    5.     responseType: 'blob',
    6.     timeout: 120000,
    7.     // 下载的实时回调，axios里的
    8.     onDownloadProgress: (a) => {
    9.       if (callback) {
    10.         callback(a, callbackParameter)
    11.       }
    12.     }
    13.   }).then((r) => {
    14.   // 下面的代码就是拿到字节流后转为文件的方法，想研究的可以自行百度
    15.     const content = r.data
    16.     const blob = new Blob([content],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})
    17.     if ('download' in document.createElement('a')) {
    18.       const elink = document.createElement('a')
    19.       elink.download = filename
    20.       elink.style.display = 'none'
    21.       elink.href = URL.createObjectURL(blob)
    22.       document.body.appendChild(elink)
    23.       elink.click()
    24.       URL.revokeObjectURL(elink.href)
    25.       document.body.removeChild(elink)
    26.     }else if (typeof window.navigator.msSaveBlob !== 'undefined'){
    27.        // IE
    28.        let blob = new Blob([content], {type: 'application/force-download'});
    29.       navigator.msSaveBlob(blob, filename)
    30.     }else {
    31.       // Firefox
    32.       var file = new File([content], filename, {type: 'application/force-download'});
    33.       window.open(URL.createObjectURL(file));
    34.     }
    35.   }).catch((r) => {
    36.     console.error(r)
    37.   })
    38. }

    以上就可以实现每行下载时候去显示进度条了

    2.批量下载弹框

     

    弹框html

    1. <el-dialog title="批量导出巡检报告" @close="toClose"
    2.  :close-on-click-modal="false" :visible="visible" lock-scroll append-to-body
    3.   width="600px" :modal-append-to-body="false">
    4.     <el-table :data="selectionList" border style="width: 100%">
    5.     <el-table-column type="index"label="序号" width="50">el-table-column>
    6.     <el-table-column prop="id" label="文件名称">
    7.       <template slot-scope="scope">
    8.        <span>{{scope.row.id}}巡检报告span>
    9.       template>
    10.     el-table-column>
    11.     <el-table-column prop="scheduleNumber" label="下载进度">
    12.       <template slot-scope="scope">
    13.         <el-progress :percentage="scope.row.scheduleNumber"  :text-inside="true" :stroke-            
    14.          width="20"  status="success">el-progress>
    15.       template>
    16.     el-table-column>
    17.   el-table>
    18. el-dialog>

    js

    1.     import { deepClone } from "@/util/util";//引入深拷贝方法
    2.     //表格选中多个
    3.     selectionChange(list) {
    4.       this.selectionList = deepClone(list);
    5.     },
    6.     //点击批量下载方法
    7.     handleDelete() {
    8.       if (this.selectionList.length === 0) {
    9.           this.$message.warning("请选择至少一条数据");
    10.           return;
    11.       }
    12.       this.$confirm("确定将选择数据批量导出巡检报告?", {
    13.           confirmButtonText: "确定",
    14.           cancelButtonText: "取消",
    15.           type: "warning"
    16.       })
    17.       .then(() => {
    18.         this.$nextTick(() => {
    19.           this.visible=true
    20.           this.selectionList.forEach(item=>{
    21.           this.exportReport(item)
    22.         })
    23.         });
    24.       })
    25.       .catch(() => {});
    26.       },
    27.     //关闭弹框清空选中状态
    28.      toClose(){
    29.       this.visible=false
    30.       this.onLoad(this.page);
    31.       this.$refs.crud.toggleSelection();
    32.     },

    深拷贝方法（不使用深拷贝的话弹框和表格进度条会冲突！！！！！）

    1. /**
    2.  * 对象深拷贝
    3.  */
    4. export const deepClone = data => {
    5.   var type = getObjType(data)
    6.   var obj
    7.   if (type === 'array') {
    8.     obj = []
    9.   } else if (type === 'object') {
    10.     obj = {}
    11.   } else {
    12.     //不再具有下一层次
    13.     return data
    14.   }
    15.   if (type === 'array') {
    16.     for (var i = 0, len = data.length; i < len; i++) {
    17.       obj.push(deepClone(data[i]))
    18.     }
    19.   } else if (type === 'object') {
    20.     for (var key in data) {
    21.       obj[key] = deepClone(data[key])
    22.     }
    23.   }
    24.   return obj
    25. }

     最后就是设置导出文件的类型在上文封装下载方法中 type设置的

    const blob = new Blob([content],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})

    关于 Blob 的 content-type 的部分媒体类型 可以参照下面！！！！！

    1. ".*"="application/octet-stream"
    2. ".001"="application/x-001"
    3. ".301"="application/x-301"
    4. ".323"="text/h323"
    5. ".906"="application/x-906"
    6. ".907"="drawing/907"
    7. ".a11"="application/x-a11"
    8. ".acp"="audio/x-mei-aac"
    9. ".ai"="application/postscript"
    10. ".aif"="audio/aiff"
    11. ".aifc"="audio/aiff"
    12. ".aiff"="audio/aiff"
    13. ".anv"="application/x-anv"
    14. ".asa"="text/asa"
    15. ".asf"="video/x-ms-asf"
    16. ".asp"="text/asp"
    17. ".asx"="video/x-ms-asf"
    18. ".au"="audio/basic"
    19. ".avi"="video/avi"
    20. ".awf"="application/vnd.adobe.workflow"
    21. ".biz"="text/xml"
    22. ".bmp"="application/x-bmp"
    23. ".bot"="application/x-bot"
    24. ".c4t"="application/x-c4t"
    25. ".c90"="application/x-c90"
    26. ".cal"="application/x-cals"
    27. ".cat"="application/vnd.ms-pki.seccat"
    28. ".cdf"="application/x-netcdf"
    29. ".cdr"="application/x-cdr"
    30. ".cel"="application/x-cel"
    31. ".cer"="application/x-x509-ca-cert"
    32. ".cg4"="application/x-g4"
    33. ".cgm"="application/x-cgm"
    34. ".cit"="application/x-cit"
    35.  
    36. ".doc"="application/msword"
    37. ".docx"="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    38. ".rtf"="application/rtf"
    39. ".xls"="application/vnd.ms-excel application/x-excel"
    40. ".xlsx"="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    41. ".ppt"="application/vnd.ms-powerpoint"
    42. ".pptx"="application/vnd.openxmlformats-officedocument.presentationml.presentation"
    43. ".pps"="application/vnd.ms-powerpoint"
    44. ".ppsx"="application/vnd.openxmlformats-officedocument.presentationml.slideshow"
    45. ".pdf"="application/pdf"
    46. ".swf"="application/x-shockwave-flash"
    47. ".dll"="application/x-msdownload"
    48. ".exe"="application/octet-stream"
    49. ".msi"="application/octet-stream"
    50. ".chm"="application/octet-stream"
    51. ".cab"="application/octet-stream"
    52. ".ocx"="application/octet-stream"
    53. ".rar"="application/octet-stream"
    54. ".tar"="application/x-tar"
    55. ".tgz"="application/x-compressed"
    56. ".zip"="application/x-zip-compressed"
    57. ".z"="application/x-compress"
    58. ".wav"="audio/wav"
    59. ".wma"="audio/x-ms-wma"
    60. ".wmv"="video/x-ms-wmv"
    61. ".mp3, .mp2, .mpe, .mpeg, .mpg"="audio/mpeg"
    62. ".rm"="application/vnd.rn-realmedia"
    63. ".mid, .midi, .rmi"="audio/mid"
    64. ".bmp"="image/bmp"
    65. ".gif"="image/gif"
    66. ".png"="image/png"
    67. ".tif, .tiff"="image/tiff"
    68. ".jpe, .jpeg, .jpg"="image/jpeg"
    69. ".txt"="text/plain"
    70. ".xml"="text/xml"
    71. ".html"="text/html"
    72. ".css"="text/css"
    73. ".js"="text/javascript"
    74. ".mht, .mhtml"="message/rfc822"

    大概率就OK了！！！！！等待大文件联调看效果！！！！！！（其中的延时器是因为我现在测试的文件只有4kb没有进度条效果 所以出此下策 请辨别哦~~~~） 

     

     

     

  • 相关阅读:
    python 练习题——1.数字组合
    第一课 概念介绍
    pagehelper 的问题
    《windows 程序设计》读书笔记 一
    JDK内置锁深入探究
    大数据之Hudi数据湖_基本概念_文件布局_文件管理 & 基本概念_索引_的原理_索引选项_全局索引与非全局索引---大数据之Hudi数据湖工作笔记0007
    移动端里调用高德APP并显示导航路线
    Graphviz 可视化图形软件（python）
    set和map使用讲解
    【MTK】【WFD】手机投屏到投影仪不显示画面
  • 原文地址：https://blog.csdn.net/killerdoubie/article/details/138185366