js实现二进制文件流下载及其它下载方式下载场景一、二进制文件流 1. 原理使用Blob()对象，Blob可以以二进制

下载场景

一、二进制文件流

1. 原理

使用Blob()对象，Blob可以以二进制或者文本的格式进行读取，注意使用的时候类型很重要，使用方法一般如下new Blob(['hello world'], { type: 'text/plain'})

2. 代码实现

注意的第一点：指定Blob的类型
需要注意的第二点：在使用前端库比如axios请求下载文件地址的时候要指定 responseType

axios.get(url, { responseType: 'blob' })

代码

// 文件下载的时候指定下载类型很重要，否则会导致保存失败，或者文件损坏，文件乱码等。
// 常见的下载类型如下，可自行删减
const downloadType = {
    'text': 'text/plain',
    'pdf': 'application/pdf',
    'zip': 'application/zip',
    'csv': 'text/csv',
    'rar': 'application/rar',
    'doc': 'application/msword',
    'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'xls': 'application/vnd.ms-excel',
    'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'ppt': 'application/vnd.ms-powerpoint',
    'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    'png': 'image/png',
    'gif':'image/gif',
    'jpeg':    'image/jpeg',
    'jpg': 'image/jpeg',
    'webp': 'image/webp',
    'svg': 'image/svg+xml',
}
// 后端返回的文件流，这个和input type=file上传的一样格式
const file = 'xxx文件'
// 获取文件类型
// 如果有文件链接可以使用如下正则
const str = 'hello.word.text'
const result = str.match(/.([^.]*)$/) 
// result[0] .text
// result[1] text 根据实际情况使用
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7632d493fa684ba4af6df2cce9ba3a40~tplv-k3u1fbpfcp-watermark.image?)

const fileType = 'zip'
// 创建一个新的 Blob 对象
const blob = new Blob([file], {downloadType.fileType});

// 创建一个新的 URL 对象，表示这个 Blob 对象
const url = URL.createObjectURL(blob);

// 使用新的 URL 对象创建一个 <a> 元素，并将其追加到 <body> 元素中
const a = document.createElement("a");
a.href = url;
a.download = `xxx文件名称.${fileType}`;
document.body.appendChild(a);

// 模拟点击 <a> 元素，实现下载
a.click();

// 清理：删除 <a> 元素和 URL 对象
document.body.removeChild(a);
URL.revokeObjectURL(url);

二、cdn链接，或者后端拼接好的互联网能访问的链接

cdn的下载比较简单，最基本的可以直接使用a标签点击下载，或者window.open下载

a标签下载

const a = document.createElement("a");
a.href = url;
a.download = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

window.open下载

window.open(fileUrl, '_blank')

第三方下载库比如 file-saver

import { saveAs } from 'file-saver';

saveAs(blob/file/url, '文件名称+文件类型/ hello world.txt')
具体详细可以参考npm file-saver

三、canvas，或者类似element-ui的table下载

canvas的下载大多数应用于图表，常见于echarts，或者分享的海报图

把前网页或者某个节点绘制成图片保存可以使用，html2canvas毕竟第三方人家都封装好了，肯定做的比我们好一些。