最近在做ant-design-vue框架的后台项目，需要用了一下的下载导入功能

`fetch`下载文档流

1.接收的数据需要先进行`response.json()`

如下:
fetch(url,xxx).then(response=>{return response.json()}).then(res=>{console.log(res);})
这是最常用的fetch的用法，res就是接口返回的数据了。

如果是文档流，则需要将response.json()改为response.blob()，也就是如下：
fetch(url,xxx).then(response=>{return response.blob()}).then(res=>{console.log(res)})

2.通过`response.blob()`转化后可以拿到文档流

3.下载文档流可以通过创建`a`标签的形式来处理

const link = document.createElement("a");
let blob = new Blob([res], {type:".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel",
});
link.href = URL.createObjectURL(blob);
link.download = `order.xlsx`;
link.click();

`fetch`实现下载文档流——代码

var param = this.filterParams(params);
var baseUrl = process.env.VUE_APP_API_BASE_URL_API;
var myHeaders = new Headers();
var Authorization = Cookie.get("Authorization");
myHeaders.append("Authorization", Authorization);
var requestOptions = {method: "get",headers: myHeaders,redirect: "follow",
};
fetch(`${baseUrl}/api/sheet-metal/orders/export?${param}`, requestOptions).then((response) => {return response.blob();}).then((res) => {const link = document.createElement("a");
let blob = new Blob([res], {type:".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",
});
link.href = URL.createObjectURL(blob);
link.download = `order.xlsx`;
link.click();}).catch((error) => console.log("error", error));

`axios`实现下载文档流

1.要在配置文件中添加`responseType:'blob'`，不是放在`headers`里面，是配置文件的第一层，其他的跟`fetch`的一样

let params = {...this.queryParam,...this.pagination,
};
//接口地址为exportOrder
exportOrder(params, { responseType: "blob" }).then((res) => {const link = document.createElement("a");let blob = new Blob([res], {type:".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",});link.href = URL.createObjectURL(blob);link.download = `order.xlsx`;link.click();
});

`fetch`实现导入`xlsx`文件

1.我这边的接口需要配置用户信息，因此用到了`authorization`和`cookie`的信息，需要配置的关键是`redirect:'follow'`

2.`new FormData`后传入的`StreamContent`是需要跟后端保持一致的，并不是随便的一个名称

import Cookie from "js-cookie";
...
var baseUrl = process.env.VUE_APP_API_BASE_URL_API;
var myHeaders = new Headers();
var Authorization = Cookie.get("Authorization");
myHeaders.append("Authorization", Authorization);
var formdata = new FormData();
formdata.append("StreamContent", new Blob([files]));
var requestOptions = {method: "post",headers: myHeaders,body: formdata,redirect: "follow",
};
fetch(`${baseUrl}/api/sheet-metal/orders/${this.detailObj.orderNo}/import?BomType=${this.fileType}`,requestOptions
).then((response) => {//其他操作}).catch((error) => console.log("error", error));

`axios`导入`xlsx`文件

1、需要配置`headers`的两个参数才可以，一定要注意，否则文件导入会失败

var formdata = new FormData();
formdata.append("StreamContent", new Blob([files]));
importFile(this.detailObj.orderNo, this.fileType, formdata, {Headers: {"Content-Type": "multipart/form-data",withCredentials: true,},
}).then((res) => {//其他操作
});

下载`vue`项目中的`static`静态文件

1.这个方法也是下载文档流的方式，不过要注意路径，直接使用`static/xxx`的路径即可。

let a = document.createElement("a");
if (type == 0) {a.href = `static/lingjian.xlsx`;a.download = "零件工艺表模板";
} else {a.href = `static/peijian.xlsx`;a.download = "配件工艺表模板";
}
a.target = "_blank";
a.click();
a.remove();

完成！！！

`fetch`的详细介绍

fetch详细介绍：https://www.cnblogs.com/cmyoung/p/8573244.html

js 实现文件下载——文档流形式和本地文件下载——基础积累相关推荐

vue-pdf插件实现pdf文档预览(自动分页预览)——基础积累
vue-pdf插件的使用--基础积累使用vue-pdf插件实现如下效果图: 实现功能:1.多个pdf预览,2.获取页码,每个pdf文档实现分页预览功能实现步骤如下: 1.npm安装在根目录下输入 ...
pdf.js在线查看（文档流／地址）
pdf.js在线查看(文档流/地址) 工作中需要在移动端在线查看pdf文件,但由于pdf文件存放在第三方的服务器中,由于各种原因无法直接返回pdf文件地址给前台,后来确定返给前台是一个base64的流 ...
小程序-记一次二进制文档流文件下载功能；
原因: 项目中遇到后端返回二进制文档流文件格式,正常下用下面方式可直接可以下载url: // 下载文件资源到本地.客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单 ...
使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,...
一,前端合成带水印的图片一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
CSS文档流与块级元素和内联元素
文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
html脱离标准文档流,关于css脱离标准文档流的两种方式
所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. 不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个浮动一个不浮动,则浮动的盒子会覆 ...
css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
HTML 文档流和文本流的理解
文本流,概括地说其实就是一系列字符,是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而position属性可以将元素从 ...
前端基础-CSS如何布局以及文档流，对于新手来说，特别有用
一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的 ...
(前端)html与css css 15、标准文档流
标准文档流常用的Word文档就是一个经典的标准文档流,内容必须是从上往下,从左往右书写的,有一个光标控制,前面的大小或者内容发生变化,后面的内容会跟着发生一些位置变化. 制作的html网页就是一个标 ...

js 实现文件下载——文档流形式和本地文件下载——基础积累

`fetch`下载文档流

1.接收的数据需要先进行`response.json()`

2.通过`response.blob()`转化后可以拿到文档流

3.下载文档流可以通过创建`a`标签的形式来处理

`fetch`实现下载文档流——代码

`axios`实现下载文档流

1.要在配置文件中添加`responseType:'blob'`，不是放在`headers`里面，是配置文件的第一层，其他的跟`fetch`的一样

`fetch`实现导入`xlsx`文件

1.我这边的接口需要配置用户信息，因此用到了`authorization`和`cookie`的信息，需要配置的关键是`redirect:'follow'`

2.`new FormData`后传入的`StreamContent`是需要跟后端保持一致的，并不是随便的一个名称

`axios`导入`xlsx`文件

1、需要配置`headers`的两个参数才可以，一定要注意，否则文件导入会失败

下载`vue`项目中的`static`静态文件

1.这个方法也是下载文档流的方式，不过要注意路径，直接使用`static/xxx`的路径即可。

`fetch`的详细介绍

js 实现文件下载——文档流形式和本地文件下载——基础积累相关推荐

最新文章

热门文章

js 实现文件下载——文档流形式和本地文件下载——基础积累

fetch下载文档流

1.接收的数据需要先进行response.json()

2.通过response.blob()转化后可以拿到文档流

3.下载文档流可以通过创建a标签的形式来处理

fetch实现下载文档流——代码

axios实现下载文档流

1.要在配置文件中添加responseType:'blob'，不是放在headers里面，是配置文件的第一层，其他的跟fetch的一样

fetch实现导入xlsx文件

1.我这边的接口需要配置用户信息，因此用到了authorization和cookie的信息，需要配置的关键是redirect:'follow'

2.new FormData后传入的StreamContent是需要跟后端保持一致的，并不是随便的一个名称

axios导入xlsx文件

1、需要配置headers的两个参数才可以，一定要注意，否则文件导入会失败

下载vue项目中的static静态文件

1.这个方法也是下载文档流的方式，不过要注意路径，直接使用static/xxx的路径即可。

fetch的详细介绍

js 实现文件下载——文档流形式和本地文件下载——基础积累相关推荐

最新文章

热门文章

`fetch`下载文档流

1.接收的数据需要先进行`response.json()`

2.通过`response.blob()`转化后可以拿到文档流

3.下载文档流可以通过创建`a`标签的形式来处理

`fetch`实现下载文档流——代码

`axios`实现下载文档流

1.要在配置文件中添加`responseType:'blob'`，不是放在`headers`里面，是配置文件的第一层，其他的跟`fetch`的一样

`fetch`实现导入`xlsx`文件

1.我这边的接口需要配置用户信息，因此用到了`authorization`和`cookie`的信息，需要配置的关键是`redirect:'follow'`

2.`new FormData`后传入的`StreamContent`是需要跟后端保持一致的，并不是随便的一个名称

`axios`导入`xlsx`文件

1、需要配置`headers`的两个参数才可以，一定要注意，否则文件导入会失败

下载`vue`项目中的`static`静态文件

1.这个方法也是下载文档流的方式，不过要注意路径，直接使用`static/xxx`的路径即可。

`fetch`的详细介绍