其他分享
首页 > 其他分享> > vue文章下载功能实现

vue文章下载功能实现

作者:互联网

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

1.添加下载按钮

2.(原始方法,会出现乱码)给按钮添加点击事件,添加接口代码


  
  1. download: function() {
  2. const row = this.tableRadio
  3. // console.log(row)
  4. axios.get( '/api/download', {
  5. params: {
  6. reportRuleId: row.reportRuleId
  7. }
  8. }).then( response => {
  9. console.log(response.data);
  10. }).catch( error => { this.$message.error(error) })
  11. }

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

3.(更正版)用axios({})这种方式,配置参数:

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

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


  
  1. axios({
  2. method: 'GET',
  3. url: '/api/download',
  4. params: {
  5. reportRuleId: row.reportRuleId
  6. },
  7. responseType: 'blob'
  8. }).then( response => {
  9. if (response.data.type === 'application/octet-stream') {
  10. // 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
  11. const fileName = response.headers[ 'content-disposition'].split( '=')[ 1]
  12. /* 兼容ie内核,360浏览器的兼容模式 */
  13. if ( window.navigator && window.navigator.msSaveOrOpenBlob) {
  14. const blob = new Blob([response.data], { type: 'application/zip' })
  15. window.navigator.msSaveOrOpenBlob(blob, fileName)
  16. } else {
  17. /* 火狐谷歌的文件下载方式 */
  18. const blob = new Blob([response.data], { type: 'application/zip' })
  19. const url = window.URL.createObjectURL(blob)
  20. const link = document.createElement( 'a') // 创建a标签
  21. link.href = url
  22. link.download = fileName // 文件重命名,若无需重命名,将该行删去
  23. link.click()
  24. URL.revokeObjectURL(url) // 释放内存
  25. }
  26. resolve(response)
  27. } else {
  28. const reader = new FileReader()
  29. reader.onload = function(event) {
  30. const msg = JSON.parse(reader.result).data
  31. _this.$errorMsg(message) // 将错误信息显示出来
  32. }
  33. reader.readAsText(response.data)
  34. }
  35. }).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',  

标签:vue,const,zip,octet,application,文章,data,response,下载
来源: https://blog.csdn.net/weixin_44887380/article/details/115347158