vue 导出文件,后端返回二进制文件流,前端vue实现在线预览

　　这篇文章主要介绍了某视频剪辑软件如何实现二进制流文件导出excel，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

目录

　　 vue二进制流文件导出超过前端代码后端结节关于二进制文件流导出超过文件的一些坑实现下载效果踩坑

vue二进制流文件导出excel

　　问了一下其他的后端，他们公司前端是a标签，后端是给了一个地址，一个标签或者window.open()都可以实现。

　　我们公司是后端返回的二进制流文件，实现了一下，亲测可以，没有问题

前端代码

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　meta http-equiv= X-UA-Compatible content= IE=edge

　　meta name= viewport content= width=device-width，initial-scale=1.0

　　标题文档/标题

　　/头

　　身体

　　按钮id=btn 下载/按钮

　　！-纱线添加轴-

　　脚本src= node _ modules/axios/dist/axios。量滴js /脚本

　　脚本

　　常量BTN=文档。getelementbyid( BTN )；

　　btn.onclick=function () {

　　axios({

　　方法： post ，

　　网址：“http://localhost:3000/下载”，

　　数据：{

　　//测试："测试数据",

　　},

　　responseType: blob //返回类型

　　}).然后((res)={

　　let name=合格率 //注意这里不可以再加。文件格式了，函数中已经封装了

　　createExcel(res.data，name) //这里就直接这样调用方法就行了

　　});

　　}

　　//vue中可以写方法然后再暴露出去

　　函数createExcel(res，name) {

　　设blob=新Blob([res]，{

　　类型："应用程序/vnd.ms-excel "

　　})

　　让文件名=名称 xlsx

　　//允许用户在客户端上保存文件

　　如果(窗口。领航员。mssaveoropenblob){

　　领航员。mssavelob(blob，文件名)

　　}否则{

　　var link=文档。createelement( a )

　　link.href=window .URL.createObjectURL(blob)

　　link.download=文件名

　　link.click()

　　//释放内存

　　窗户URL.revokeObjectURL(link.href)

　　}

　　}

　　//1 .mssavelob:只提供一个保存按钮

　　//窗口。领航员。mssavelob(blob对象， mssavelob _ testfile。txt’)；

　　//2.msSaveOrOpenBlob:提供保存和打开按钮

　　//窗口。领航员。mssaveoropenblob(blob对象， msSaveBlobOrOpenBlob _ test文件。txt’)；

　　/脚本

　　/html

后端node

　　const http=require( http )；

　　const fs=require( fs )；

　　const server=http。创建服务器((req，res)={

　　if (req.url===/download) {

　　res.writeHead(200，{

　　内容类型“:”应用程序/vnd。 ms-excel ，//返回超过

　　//跨域设置

　　访问控制允许起源: * ,

　　"访问控制允许标头":"内容类型",

　　});

　　//异步读取文件内容这里新建了一个test.xlsx的超过

　　fs.readFile(test.xlsx ，(err，data)={

　　//返回二进制文件流

　　资源结束(数据);

　　});

　　}

　　});

　　server.listen(3000，()={

　　console.log(好厉害，3000的服务器起来了);

　　});

关于二进制文件流导出Excel文件的一些坑

实现下载效果

　　El-button type= warning icon= El-icon-download size= mini @ click= download()导出/el-button

　　//下载操作

　　下载(){

　　返回axios({

　　网址："/下载/短信",

　　方法： post ，

　　数据：this.queryForm，

　　响应类型：“blob”，

　　标题：{

　　"内容类型":"应用程序/json "

　　}

　　})。然后(res={

　　console.log(res，返回数据列);

　　常量blob=新Blob([res.data]，{

　　类型：“应用程序/vnd.ms-excel”

　　});

　　console.log(blob，-0990 )；

　　Const fileName= SMS list.xls

　　const link node=document . createelement( a )；

　　linkNode.download=文件名；//a标记的download属性指定下载文件的名称。

　　link node . style . display= none ；

　　link node . href=URL . createobjecturl(blob)；//生成Blob URL

　　document . body . appendchild(link node)；

　　link node . click()；//模拟鼠标点击按钮

　　URL . revokeobjecturl(link node . href)；//释放URL对象

　　document . body . remove child(link node)；

　　})。catch((err)={

　　console . log(err)；

　　});

　　返回res

　　},

踩坑

　　1.刚开始在网上看到需要axios原生才能请求，后来引入了axios，但是一直报错，导致下载的then代码无法执行，就直接去catch，输出错误。

　　研究了很久，发现是blob返回没有code，也没有message，直接在拦截器里设置了代码的判断拦截，导致请求总是报错。

　　2.发送请求时，必须添加responseType: ‘blob’，否则导出的文件是乱码格式。

　　3.在中定义的blob new中的数据需要再经过一层，而不是直接输出。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。