Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

JS 下载文件

下载文件分为两种形式，哪两种方式取决于后台；

如果后台服务器的静态目录有可供下载的静态资源，后台人员告知你文件路径，直接window.location.href方式获取即可；
如果后台服务器无可供下载的静态资源，返回的是一个文件流(response-type: application/octet-stream;charset=UTF-8 )，则使用第二种方式（将文件写入内存，并且创建a元素，a链接href属性指向内存中的文件，download属性指向要下载的文件名，模拟a元素的点击事件，进行下载；）

1、第一种，后台服务器有静态资源且是固定的文件名（GET方式下载文件）

window.location.href="http://www.域名/template.xlsx(文件名)"

2、第二种，后台返回文件流

解决办法一：本地可测试；推荐使用；

第一步：引入axios第三方库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

第二步：传参、调接口，下载文件

返回数据是Blob对象

axios.post(请求路径URL, {参数Params}, {responseType: 'blob'}).then(function(res){var blob = res.data;// FileReader主要用于将文件内容读入内存var reader = new FileReader();reader.readAsDataURL(blob);// onload当读取操作成功完成时调用reader.onload = function(e) {var a = document.createElement('a');// 获取文件名fileNamevar fileName = res.headers["content-disposition"].split("=");fileName = fileName[fileName.length - 1];fileName = fileName.replace(/"/g, "");a.download = fileName;a.href = e.target.result;document.body.appendChild(a);a.click();document.body.removeChild(a);}});

返回的数据是流文件：（流文件和Blob是不同的）

考虑到兼容IE等问题最好采用下列的方式：

let res = await proudctionApi.export_zjy(data);//获取数据
let blob = this.getBlob(res.data);// 将数据转化为Blob对象
let fileName = `日报${this.date}.xlsx`;// 设置文件名utils.saveAs(blob, fileName); //getBlob方法
getBlob(data) {let blob = new Blob([data], {type: "application/vnd.ms-excel;charset=utf-8",});return blob;}
//proudctionApi.export_zjy
export function export_zjy(data) {return request({url: "/wellbore/com_daily/export_zjy",method: "post",data,responseType: 'blob' //必须设置返回数据类型 为blob});
}//utils.save 方法如下：
export const saveAs = (blob, filename) => {if (window.navigator.msSaveOrOpenBlob) {//IE保存Blob对象navigator.msSaveBlob(blob, filename)} else {//其他浏览器var link = document.createElement('a')var body = document.querySelector('body')/*window.URL.createObjectURL可以用于在浏览器上预览本地图片或者视频,创建一个url*/link.href = window.URL.createObjectURL(blob)//为Blob对象创建一个url地址link.download = filename/*
如果不设置download属性的话，呢么如果是jpg、txt等浏览器支持打开的属性，就会在浏览器打开该文件而不是下载下来
*/// fix Firefoxlink.style.display = 'none'body.appendChild(link)link.click()body.removeChild(link)window.URL.revokeObjectURL(link.href)// 释放地址}}

解决办法二：form表单提交，本地不可测试；不推荐使用；

var exportForm = $('<form action="/api/cert/download" method="post">\<input type="hidden" name="ids" value="'+参数ids值+'"/>\</form>');$(document.body).append(exportForm);exportForm.submit();exportForm.remove();

参考地址：

https://www.cnblogs.com/zero-zm/p/12366955.html

JS 下载文件两种方式总结相关推荐

STM32_基础入门_程序下载的两种方式
一.ISP串口下载 1.所涉及工具:MDK+FlyMcu 2.硬件连接 3.连接步骤 1.搜索并选择对应串口 2.选择要下载的hex文件,将"编程前重装文件"打勾 3.勾选&quo ...
python-网络图片下载（两种方式）
利用python进行网络图片下载(两种方式) 1:方式一 1:代码 # coding=utf-8 """ @author: jiajiknag 程序功能: 图片批量下载_ ...
iOS WKWebView和JS交互的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...
javascript下载文件几种方式，接收后台返回流下载或直接下载文件
目录 1 javascript下载文件7中方式 1.1 window.location.href下载 1.2 window.location下载 1.3 iframe下载 1.4 form表单的形式下 ...
下载网络图片两种方式
比如因特网上有一图片资源http://img.7799520.com/00356c0e-1725-4dc2-b091-5db958b6c637,现在要把该资源下载到本地,下面介绍如下两种方式. 方式一 ...
Linux之文件上传和下载（两种方式）
一.rz上传.sz下载文件 rz是将Windows系统上的文件上传到Linux下sz是将Linux系统下的文件上传到Windows下 1.rz案例,输入rz下载文件到Linux下 [root@bogo ...
前端实现HTML转PDF下载的两种方式
方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件.实现步骤如下: 1,下载插 ...
以太坊智能合约交互调用，web3.js，web3j两种方式实现
导语接上篇文章 <使用hardhat部署solidity智能合约到测试网> 部署完合约之后,那么如何区块链进行交互呢?这节的主要内容就是使用web3.js和web3j来与区块链以及链上的 ...
.net 下载文件几种方式
方式一:TransmitFile实现下载.将指定的文件直接写入 HTTP 响应输出流,而不在内存中缓冲该文件. protected void Button1_Click(object sender, ...

JS 下载文件两种方式总结

Blob

JS 下载文件

1、第一种，后台服务器有静态资源且是固定的文件名（GET方式下载文件）

2、第二种，后台返回文件流

解决办法一：本地可测试；推荐使用；

解决办法二：form表单提交，本地不可测试；不推荐使用；

JS 下载文件两种方式总结相关推荐

最新文章

热门文章

JS 下载文件两种方式总结

Blob

JS 下载文件

1、 第一种，后台服务器有静态资源且是固定的文件名（GET方式下载文件）

2、第二种，后台返回文件流

解决办法一：本地可测试；推荐使用；

解决办法二：form表单提交，本地不可测试；不推荐使用；

JS 下载文件两种方式总结相关推荐

最新文章

热门文章

1、第一种，后台服务器有静态资源且是固定的文件名（GET方式下载文件）