vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法

 更新时间:2023年04月27日 10:37:11   作者:Salt_NaCl  
使用Vue时我们前端如何处理后端返回的文件流,下面这篇文章主要给大家介绍了关于vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

项目场景

后端采用文件流的方式将文件信息发送给前端,前端需要接收相应的流信息做出对应的操作,如接收到图片、pdf将进行预览模式,将接收到压缩包形式的则进行文件下载。后端对相应的文件进行不同的传输方式进行传输,前端则需要接收相应的信息并进行操作。

问题描述

当收到图片、pdf则可以正常的进行操作,当接收到压缩包文件流时候可以正常下载,但是下载后,下载的文件损坏了。

原因分析

由于文件不同,所以接收方式也是有区别的,普通的图片、pdf可以采用日常的请求方式去请求,而压缩包的请求需要加上接收数据格式responseType:为blob,默认的responseType为""。

解决方案

1、图片的解决方式

export const getFileImg = row => {
    return request({
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//请求路径
        method: 'get',	//请求模式
        params: row,	//请求参数
    })
}

2、文件流的解决方式

export const getFileZip = row => {
    return request({
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//请求路径
        method: 'get',	//请求模式
        params: row,	//请求参数
        responseType: 'blob',
    })
}

3、文件下载

/**
 * 下载压缩包文件
 * @param {blob} fileArrayBuffer 文件流
 * @param {String} filename 文件名称
 * @param {String} fileType 文件格式
 */
export const downloadZip = (fileArrayBuffer, filename, fileType) => {
  let data = new Blob([fileArrayBuffer], { type: fileType == 'zip' ? 'application/zip,charset=utf-8' : 'application/x-rar-compressed,charset=utf-8' });
  if (typeof window.chrome !== 'undefined') {
    // Chrome
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(data);
    link.download = filename;
    link.click();
    console.log(data);
  } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // IE
    var blob = new Blob([data], { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' });
    window.navigator.msSaveBlob(blob, filename);
  } else {
    // Firefox
    var file = new File([data], filename, { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' });
    window.open(URL.createObjectURL(file));
  }
}

4、Blob下载时的文件格式

文件格式type类型
aacaudio/aac
.abwapplication/x-abiword
.avivideo/x-msvideo
.azwapplication/vnd.amazon.ebook
.binapplication/octet-stream
.bmpimage/bmp
.bzapplication/x-bzip
.bz2application/x-bzip2
.cshapplication/x-csh
.csstext/css
.csvtext/csv
.docapplication/msword
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotapplication/vnd.ms-fontobject
.epubapplication/epub+zip
.gifimage/gif
.htm/.htmltext/html
.icoimage/vnd.microsoft.icon
.icstext/calendar
.jarapplication/java-archive
.jpeg/.jpgimage/jpeg
.jstext/javascript
.jsonapplication/json
.jsonldapplication/ld+json
.mid/.midiaudio/midi audio/x-midi
.mjstext/javascript
.mp3audio/mpeg
.mpegvideo/mpeg
.mpkgapplication/vnd.apple.installer+xml
.odpapplication/vnd.oasis.opendocument.presentation
.odsapplication/vnd.oasis.opendocument.spreadsheet
.odtapplication/vnd.oasis.opendocument.text
.ogaaudio/ogg
.ogvvideo/ogg
.ogxapplication/ogg
.otffont/otf
.pngimage/png
.pdfapplication/pdf
.pptapplication/vnd.ms-powerpoint
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
.rarapplication/x-rar-compressed
.rtfapplication/rtf
.svgimage/svg+xml
.swfapplication/x-shockwave-flash
.tarapplication/x-tar
.tif/.tiffimage/tiff
.ttffont/ttf
.txttext/plain
.vsdapplication/vnd.visio
.wavaudio/wav
.webaaudio/webm
.webmvideo/webm
.webpimage/webp
.wofffont/woff
.woff2font/woff2
.xhtmlapplication/xhtml+xml
.xlsapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlapplication/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3)
.xulapplication/vnd.mozilla.xul+xml
.zipapplication/zip
.3gpvideo/3gpp audio/3gpp(若不含视频)
.3g2video/3gpp2 audio/3gpp2(若不含视频)
.7zapplication/x-7z-compressed

总结

到此这篇关于vue2文件流下载成功后文件格式错误、打不开及内容缺失解决的文章就介绍到这了,更多相关vue2文件流下载后文件格式错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.config.productionTip = false 不起作用的问题及解决

    Vue.config.productionTip = false 不起作用的问题及解决

    这篇文章主要介绍了Vue.config.productionTip = false为什么不起作用,本文给大家分析问题原因解析及解决方案,需要的朋友可以参考下
    2022-11-11
  • Vue实现递归组件的思路与示例代码

    Vue实现递归组件的思路与示例代码

    以简单的树形组件为案例,实现在组件中递归组件,下面这篇文章主要给大家介绍了关于Vue实现递归组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue 使用eventBus实现同级组件的通讯

    vue 使用eventBus实现同级组件的通讯

    这篇文章主要介绍了vue 使用eventBus实现同级组件的通讯,需要的朋友可以参考下
    2018-03-03
  • vant框架van-cell插槽无法换行问题及解决

    vant框架van-cell插槽无法换行问题及解决

    这篇文章主要介绍了vant框架van-cell插槽无法换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue实现插槽下渲染dom字符串的使用

    Vue实现插槽下渲染dom字符串的使用

    本文主要介绍了Vue实现插槽下渲染dom字符串的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue和iview实现Scroll 数据无限滚动功能

    vue和iview实现Scroll 数据无限滚动功能

    今天小编就为大家分享一篇vue和iview实现Scroll 数据无限滚动功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue单向数据流的深入理解

    vue单向数据流的深入理解

    随着前端的项目的越来越复杂,出现了一堆概念来降低开发的复杂性,单向数据流就是其中一个,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • Vue项目引入translate.js国际化自动翻译组件的方法

    Vue项目引入translate.js国际化自动翻译组件的方法

    这篇文章主要给大家介绍了关于Vue项目引入translate.js国际化自动翻译组件的相关资料,除了基本的文本翻译功能之外,jstranslate还提供了一些高级功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 在Vue中使用icon 字体图标的方法

    在Vue中使用icon 字体图标的方法

    这篇文章主要介绍了在Vue中使用icon 字体图标的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 详解Element-ui NavMenu子菜单使用递归生成时使用报错

    详解Element-ui NavMenu子菜单使用递归生成时使用报错

    这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论