vue 两种文档下载方法的实现（后台传递文件流，后台返回文件下载地址）

后台返回文件流

1.因为是文件流下载，所以在取后台数据的时候，要多传递一个【responseType: ‘blob’】这个参数，是为了最后数据返回时response的data为【blob】文件格式（data: Blob {size: 22528, type: “application/vnd.ms-excel”}），否则返回的数据只有文件流的结构体，不包含【blob】。
下面为封装的获取后台文件流的方式

function downloadPost (config){return new Promise((resolve,reject) => {axios({url: config.url,method: 'post',data: config.data,responseType: 'blob'}).then(res => {resolve(res)}).catch(err=>{reject(err);});});
}

2.将取回来的response直接返回到应用页，通过取到的response去实现文件流转换的制作。我是封装了一个方法，方便多处调用。如果不封装方法的话，直接将实现方法写在返回结果的地方就可以了
下面是调用后台方法的写法

downloadTemplate({responseType: 'arraybuffer'}).then(res=>{// 文件流转换成xls文件this.$utils.fileConversion("白名单导入模板.xls",res);this.$message({type:'success',message:'模板文件已开始下载!'});
})

下面是上面返回结果调用的【fileConversion】的写法

   /*** 字节流转换成文件下载* inputFileName：文件名* data：后台取得数据*/fileConversion(inputFileName,data){let str = data.headers['content-disposition'];// 文件名let fileName = inputFileName;let blob = new Blob([data.data], {type:"application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob);} else {let elink = document.createElement("a");elink.download = fileName;elink.style.display = "none";elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);}},

以上方法就可以实现后台返回文件流的文档转换了。
需要注意的是，我是通过修改传递的文件名用来控制导出的格式，大家可以参考我的方法实现，如果有更好的方法欢迎评论~~
下面配送控制方式：

if(exportType == 1) {fileName = "白名单导出数据.xls"
} else {fileName = "白名单导出数据.csv"
}

通过URL下载文件的话，其实后台请求封装与文件流是一样的，封装的话和文件流也是一样的，传递取回来的response和文件名，我就不一一粘代码了，可以参考上面的方式。（在这里小小备注一下：因为我没有亲测url的方式，所以可能会存在小问题，大家如果试了有什么问题，欢迎评论，我会慢慢修改的~~）
奉上封装方法：

/*** 从URL里下载文件* fileName:文件名* data:后台取得的数据*/// 下载文件downloadFile (fileName,data) {if (!data) { return }let url = window.URL.createObjectURL(new Blob([data]))let link = document.createElement('a')link.style.display = 'none'link.href = url;link.setAttribute('download', fileName)document.body.appendChild(link)link.click()},

感谢阅读~~

vue 两种文档下载方法的实现（后台传递文件流，后台返回文件下载地址）相关推荐

团队合作开发的两种文档工具
前言团队中,需要从需求分析开始确定,一直到项目的开发完成,中间要经历各种事情,需要各种任务来维持,一直到合作开发完成,所以需要一个团队协作查看的任务工具.那么这里推荐的有两种,trello,和tea ...
将vue文档下载到本地预览
将vue文档下载到本地预览由于vue文档在服务器在国外,因此访问速度较慢,为了方便文档查看,可以将文档下载到本地预览步骤到vue的GitHub仓库下载文档源码下载node.js和git安装到本 ...
Vue+ElementUi 项目中将页面内容转为 Word文档下载
Vue+ElementUi 项目中将页面内容转为 Word文档下载需要提前做好的现成模板(魔板个页面基本上相同的内容)-模板内有变量,替换成页面对应的数据 HTML页面: 转换的word 以下是正 ...
纯前端vue利用docxtemplater实现生成word文档下载 word模板，勾选框的默认勾选。。
首先需要下载如下工具: cnpm i docxtemplater pizzip jszip-utils file-saver -S 然后将它们引入: import JSZipUtils from &q ...
Word文档下载(图片,数据表格)
Java 下载Word文档xwpfTemplate Java 下载Word文档xwpfTemplate 文档下载(图片,数据表格),pom依赖 <dependency><groupI ...
安卓软件改名器_【安卓软件】文档下载|只能说是最牛下载器之一
全网文档文库下载文库下载器是库文档下载软件,可帮助用户免费下载百度库.协作.帮助库等库资源,可以原始格式下载,非常实用,操作简单,需要时可以下载.还添加了对WIP.Hownet和其他学术网络的支持 ...
如何计算两个文档的相似度（一）
下面的内容转自我爱自然语言处理博客,感谢博主,学到很多东西. 原文链接:http://www.52nlp.cn/%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97%E4%B8%A ...
比较两个文档的相似程度_您的文档对读者的友好程度如何？
比较两个文档的相似程度有成就的技术作家所要做的首要任务是为观众写作. 这个任务听起来很简单,但是当我想到世界各地的人们时,我想知道:他们能阅读我们的文档吗? 可读性已经研究了多年,接下来是对研究成果 ...
java编码规范文档下载_软件项目实训及课程设计指导——制定待开发项目中各种文档的规范...
软件项目实训及课程设计指导--制定待开发项目中各种形式文档的规范 1.制定对课程设计项目开发过程中的规范性要求 (1)从"形式"到"内容"两个方面控制和要求开发 ...
比较两个文档中的文字的区别
比较两段文字的区别的几种方法: 首先,什么时候才需要这个功能,我想,只有当两段文字非常相似的时候才会使用这个功能.比如我昨天看代码,两段代码非常相似,我看了N久也没发现他们的区别.但是,使用软件就能很 ...

vue 两种文档下载方法的实现（后台传递文件流，后台返回文件下载地址）

后台返回文件流

vue 两种文档下载方法的实现（后台传递文件流，后台返回文件下载地址）相关推荐

最新文章

热门文章