vue文章下载功能实现-前端开发

vue前后端分离，使用element的el-button组件从后台下载文件，并且解决乱码问题 1.添加下载按钮2.（原始方法，会出现乱码）给按钮添加点击事件，添加接口代码download: function() {const row = this.tableRadio// ...

vue前后端分离，使用element的el-button组件从后台下载文件，并且解决乱码问题

1.添加下载按钮

2.（原始方法，会出现乱码）给按钮添加点击事件，添加接口代码


  
    
     
    
    
     
       download: 
      function() {
     
    

    
     
    
    
           
      const row = 
      this.tableRadio
     
    

    
     
    
    
           
      // console.log(row)
     
    

    
     
    
    
     
            axios.get(
      '/api/download', {
     
    

    
     
    
    
             
      params: {
     
    

    
     
    
    
               
      reportRuleId: row.reportRuleId
     
    

    
     
    
    
     
              }
     
    

    
     
    
    
             
     
    

    
     
    
    
     
            }).then(
      response => {
     
    

    
     
    
    
             
      console.log(response.data);
     
    

    
     
    
    
     
            }).catch(
      error => { 
      this.$message.error(error) })
     
    

    
     
    
    
     
      }

一直使用的是axios.get()这种请求方式，可以访问后台，但是返回的是一堆乱码

3.（更正版）用axios（{}）这种方式，配置参数：

根据返回的类型response.data.type，如果是文件流application/octet-stream则下载文件，如果是json则显示错误信息；

文件名来自http头部的Content-Disposition字段；


  
    
     
    
    
     
      axios({
     
    

    
     
    
    
             
      method: 
      'GET',
     
    

    
     
    
    
             
      url: 
      '/api/download',
     
    

    
     
    
    
             
      params: {
     
    

    
     
    
    
               
      reportRuleId: row.reportRuleId
     
    

    
     
    
    
     
              },
     
    

    
     
    
    
             
      responseType: 
      'blob'
     
    

    
     
    
    
     
            }).then(
      response => {
     
    

    
     
    
    
            
      if (response.data.type === 
      'application/octet-stream') {
     
    

    
     
    
    
             
      // 获取http头部的文件名信息，若无需重命名文件，将下面这行删去
     
    

    
     
    
    
             
      const fileName = response.headers[
      'content-disposition'].split(
      '=')[
      1]
     
    

    
     
    
    
             
      /* 兼容ie内核，360浏览器的兼容模式 */
     
    

    
     
    
    
             
      if (
      window.navigator && 
      window.navigator.msSaveOrOpenBlob) {
     
    

    
     
    
    
               
      const blob = 
      new Blob([response.data], { 
      type: 
      'application/zip' })
     
    

    
     
    
    
               
      window.navigator.msSaveOrOpenBlob(blob, fileName)
     
    

    
     
    
    
     
              } 
      else {
     
    

    
     
    
    
               
      /* 火狐谷歌的文件下载方式 */
     
    

    
     
    
    
               
      const blob = 
      new Blob([response.data], { 
      type: 
      'application/zip' })
     
    

    
     
    
    
               
      const url = 
      window.URL.createObjectURL(blob)
     
    

    
     
    
    
               
      const link = 
      document.createElement(
      'a') 
      // 创建a标签
     
    

    
     
    
    
     
                link.href = url
     
    

    
     
    
    
     
                link.download = fileName 
      // 文件重命名，若无需重命名，将该行删去
     
    

    
     
    
    
     
                link.click()
     
    

    
     
    
    
     
                URL.revokeObjectURL(url) 
      // 释放内存
     
    

    
     
    
    
     
              }
     
    

    
     
    
    
     
              resolve(response)
     
    

    
     
    
    
     
            } 
      else {
     
    

    
     
    
    
             
      const reader = 
      new FileReader()
     
    

    
     
    
    
     
              reader.onload = 
      function(event) {
     
    

    
     
    
    
               
      const msg = 
      JSON.parse(reader.result).data
     
    

    
     
    
    
     
                _this.$errorMsg(message) 
      // 将错误信息显示出来
     
    

    
     
    
    
     
              }
     
    

    
     
    
    
     
              reader.readAsText(response.data)
     
    

    
     
    
    
     
            }
     
    

    
     
    
    
     
            }).catch(
      error => _this.$errorMsg(error) )

这样就可以成功下载到.zip文件

4.报跨域问题

经过排查，我这边产生这个问题的原因是参数格式，如下图，我的参数存在一个JOSN字符串，导致报错

解决办法：使用qs模块将params参数格式转换一下，将下面这行代码放在params后面

paramsSerializer: params => { return qs.stringify(params, { arrayFormat: 'brackets' }) }

type：'application/zip'可以更改下载文件的类型，具体有以下这些类型

'doc'        => 'application/msword',
    'bin'        => 'application/octet-stream',
    'exe'        => 'application/octet-stream',
    'so'        => 'application/octet-stream',
    'dll'        => 'application/octet-stream',
    'pdf'        => 'application/pdf',
    'ai'        => 'application/postscript',
    'xls'        => 'application/vnd.ms-excel',
    'ppt'        => 'application/vnd.ms-powerpoint',
    'dir'        => 'application/x-director',
    'js'        => 'application/x-javascript',
    'swf'        => 'application/x-shockwave-flash',
    'xhtml'        => 'application/xhtml+xml',
    'xht'        => 'application/xhtml+xml',
    'zip'        => 'application/zip',
    'mid'        => 'audio/midi',
    'midi'        => 'audio/midi',
    'mp3'        => 'audio/mpeg',
    'rm'        => 'audio/x-pn-realaudio',
    'rpm'        => 'audio/x-pn-realaudio-plugin',
    'wav'        => 'audio/x-wav',
    'bmp'        => 'image/bmp',
    'gif'        => 'image/gif',
    'jpeg'        => 'image/jpeg',
    'jpg'        => 'image/jpeg',
    'png'        => 'image/png',
    'css'        => 'text/css',
    'html'        => 'text/html',
    'htm'        => 'text/html',
    'txt'        => 'text/plain',
    'xsl'        => 'text/xml',
    'xml'        => 'text/xml',
    'mpeg'        => 'video/mpeg',
    'mpg'        => 'video/mpeg',
    'avi'        => 'video/x-msvideo',
    'movie'        => 'video/x-sgi-movie',