前端实现下载功能汇总（下载二进制流文件、数组下载成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 attribute
const 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 header
rows.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 number
dataView.setUint16(4, 2, true); // version major
dataView.setUint16(6, 4, true); // version minor
dataView.setUint32(8, 0, true); // timezone
dataView.setUint32(12, 0, true); // sigfigs
dataView.setUint32(16, 65535, true); // snaplen
dataView.setUint32(20, 1, true); // linktype
return 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); // seconds
dataView.setUint32(4, microseconds, true); // microseconds
dataView.setUint32(8, length, true); // number of octets of packet saved in file
dataView.setUint32(12, length, true); // actual length of the packet
return { 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 jszip2、导入并使用
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，解压之后就是：
原文地址：https://blog.csdn.net/wzy_PROTEIN/article/details/142959701
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！