前端实现下载功能汇总（下载二进制流文件、数组下载成csv、将十六进制下载成pcap、将文件下载成zip）

前言：汇总一下做过的下载功能，持续补充中

一、将后端传过来的二进制流文件下载（需要提取headers里面的文件名）

const { herders,data }=res;
// 创建下载链接元素
const link = document.createElement("a");// 创建 Blob 对象，将服务器响应的数据作为 Blob 的内容
const blob = new Blob([data], { type: "application/vnd.ms-excel" });// 解析服务器响应头中的 Content-Disposition 字段获取文件名
var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
var contentDisposition = decodeURI(headers["content-disposition"]);
var result = patt.exec(contentDisposition);
var fileName = result[1];
fileName = fileName.replace(/\"/g, "");// 隐藏下载链接元素
link.style.display = "none";// 设置下载链接的属性
link.href = URL.createObjectURL(blob);
link.setAttribute("download", fileName);// 将下载链接添加到页面中
document.body.appendChild(link);// 模拟点击下载链接
link.click();// 移除下载链接元素
document.body.removeChild(link);

以上代码可以直接copy进你的点击事件，然后根据你和后端约定的稍微改一下就行 

需要理解的点：

1、res是后端传给我的数据，data是二进制流文件，headers里面有我需要的文件名，所以我将他们提取出来了；

2、创建blob时的type是用来指定不同的媒体类型（MIME），就是你要下载什么文件，我上面例子写的application/vnd.ms-excel就是微软 Excel 文件，那么就会下载成一个excel文件；

其他常见的MIME类型：

• text/plain：纯文本文件，通常用于 .txt 文件。
• text/html：HTML 文件，用于网页文档。
• application/json：JSON 数据，用于传输和存储结构化数据。
• application/pdf：PDF 文件，用于可移植文档格式。
• image/jpeg：JPEG 图像文件。
• image/png：PNG 图像文件。
• audio/mp3：MP3 音频文件。
• video/mp4：MP4 视频文件。

这只是一小部分常见的MIME类型，实际上有很多种不同的MIME类型，每种类型对应不同的文件格式或媒体类型，要根据需要来选择。

3、这些是用正则去卡文件名的操作，需要根据你的需求灵活变动

二、将后端传过来的二进制流文件下载（不需要提取文件名，前端来决定下载下来的文件叫什么

）

          //创建 Blob 对象const blob = new Blob([row.traffic_meta], { type: "text/plain" });// 创建下载链接const url = URL.createObjectURL(blob);// 创建下载按钮const downloadLink = document.createElement("a");downloadLink.href = url;downloadLink.download = "example.txt"; // 设置下载文件的文件名// 将按钮添加到页面中document.body.appendChild(downloadLink);// 模拟点击下载链接downloadLink.click();// 移除下载按钮document.body.removeChild(downloadLink);

以上代码没有取后端传的文件名，是前端自己定义的，row.traffic_meta是二进制流文件，用的时候记得替换

三、将表格数据（数组）下载成csv文件

1、需求描述：下载一个表格，但是后端不传二进制文件流，而是接口返回给前端的数组。

类似这样的数据：

 const tableData=[

    {name: '1',value: 1},

    {name: '2',value: 2},

    {name: '3',value: 3},

    {name: '4',value: 4},

    {name: '5',value: 5},

    {name: '6',value: 6},

    {name: '7',value: 7},

  ]

要下载成一个csv，表头就是name和value

2、在utils创建一个js文件Export2Csv.js：

function processRow(row) {let finalVal = ''for (let j = 0; j < row.length; j++) {let innerValue = row[j] === null ? '' : row[j].toString()if (row[j] instanceof Date) {innerValue = row[j].toLocaleString()}let result = innerValue.replace(/"/g, '""')if (result.search(/("|,|\n)/g) >= 0) { result = '"' + result + '"' }if (j > 0) { finalVal += ',' }finalVal += result}return finalVal + '\n'
}export function exportToCsv(filename, rows) {let csvFile = ''for (let i = 0; i < rows.length; i++) {csvFile += processRow(rows[i])}// 添加\ufeff头，标识excel可以打开UTF8编码的文件const blob = new Blob(['\ufeff', csvFile], { type: 'text/csv;charset=utf-8;' })if (navigator.msSaveBlob) { // IE 10+navigator.msSaveBlob(blob, filename)} else {const link = document.createElement('a')if (link.download !== undefined) { // feature detection// Browsers that support HTML5 download attributeconst url = URL.createObjectURL(blob)link.setAttribute('href', url)link.setAttribute('download', filename)link.style.visibility = 'hidden'document.body.appendChild(link)link.click()document.body.removeChild(link)}}
}export function exportToCsv_zl(filename, rows) {let csvFile = ''for (let i = 0; i < rows.length; i++) {csvFile += processRow(rows[i])}// 添加\ufeff头，标识excel可以打开UTF8编码的文件// const blob= new Blob(['\ufeff', csvFile], { type: 'text/csv;charset=utf-8;' })console.log(csvFile);return csvFile
}export function exportDictArray2csv(data, filename,zl) {const keys = Object.keys(data[0])const rows = []// writer headerrows.push(keys)data.forEach(dict => {const row = []keys.forEach(key => {row.push(dict[key])})rows.push(row)})if(zl){return exportToCsv_zl(filename,rows)}else{exportToCsv(filename, rows)}}export default exportDictArray2csv

3、 导入在需要该功能的页面里使用

import { exportDictArray2csv } from "@/utils/Export2Csv.js";const filename = `data.csv`;
exportDictArray2csv(tableData.value, filename);

 四、将16进制转化为pcap包并下载

1、方法代码：

// 将十六进制字符串转换为字节数组
function hexToBytes(hex) {const bytes = [];for (let i = 0; i < hex.length; i += 2) {bytes.push(parseInt(hex.substr(i, 2), 16));}return new Uint8Array(bytes);
}// 构建 PCAP 文件头
function createPcapHeader() {const header = new Uint8Array(24);const dataView = new DataView(header.buffer);dataView.setUint32(0, 0xa1b2c3d4, true); // magic numberdataView.setUint16(4, 2, true); // version majordataView.setUint16(6, 4, true); // version minordataView.setUint32(8, 0, true); // timezonedataView.setUint32(12, 0, true); // sigfigsdataView.setUint32(16, 65535, true); // snaplendataView.setUint32(20, 1, true); // linktypereturn header;
}// 创建 PCAP 数据包（这里仅作为示例，你需要根据具体数据填充）
function createPcapPacket(data) {const packetHeader = new Uint8Array(16);const dataView = new DataView(packetHeader.buffer);const timestamp = Math.floor(Date.now() / 1000); // 当前时间戳const microseconds = (Date.now() % 1000) * 1000; // 微秒部分const length = data.length;dataView.setUint32(0, timestamp, true); // secondsdataView.setUint32(4, microseconds, true); // microsecondsdataView.setUint32(8, length, true); // number of octets of packet saved in filedataView.setUint32(12, length, true); // actual length of the packetreturn { header: packetHeader, data };
}// 主函数
function createPcapFile(hexString) {const pcapHeader = createPcapHeader();const packetData = hexToBytes(hexString);const pcapPacket = createPcapPacket(packetData);// 拼接 PCAP 文件内容const pcapFile = new Uint8Array(pcapHeader.length + pcapPacket.header.length + pcapPacket.data.length);pcapFile.set(pcapHeader, 0);pcapFile.set(pcapPacket.header, pcapHeader.length);pcapFile.set(pcapPacket.data, pcapHeader.length + pcapPacket.header.length);return pcapFile;
}

2、使用该方法：

          const pcapFile = createPcapFile(pkt_data);const blob1 = new Blob([pcapFile], { type: "application/octet-stream" });// 创建下载链接const url = URL.createObjectURL(blob1);// 创建下载按钮const downloadLink = document.createElement("a");downloadLink.href = url;downloadLink.download = "命中流量.pcap"; // 设置下载文件的文件名// 将按钮添加到页面中document.body.appendChild(downloadLink);// 模拟点击下载链接downloadLink.click();// 移除下载按钮document.body.removeChild(downloadLink);

五、将两个文件合成zip下载

1、先下载插件

npm i jszip

2、导入并使用

      import JSZip from "jszip";import { saveAs } from "file-saver";const blob1 = res.data;const blob2 = new Blob(["\ufeff", exportDictArray2csv([row], "filename.csv", true)],{ type: "text/csv;charset=utf-8;" });const zip = new JSZip();// 将 blob 数据添加到 ZIP 文件zip.file(`原始流量.pcap`, blob1);zip.file("告警事件.csv", blob2);// 生成 ZIP 文件const zipBlob = await zip.generateAsync({ type: "blob" });saveAs(zipBlob, "files.zip");

 以上代码就是将两个bolb传入插件并下载成了一个zip，解压之后就是：