当前位置：首页 > JavaScript

js实现文件合并

2026-02-03 03:06:51JavaScript

使用 File API 读取文件内容

在浏览器环境中，可以利用 FileReader API 读取用户选择的文件内容。通过监听文件输入框的 change 事件获取文件列表，使用 FileReader 异步读取文本或二进制数据。

const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
  const files = event.target.files;
  const readers = Array.from(files).map(file => {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = (e) => resolve(e.target.result);
      reader.readAsText(file); // 或 readAsArrayBuffer 处理二进制文件
    });
  });
});

合并文本文件内容

对于文本文件，可通过字符串拼接实现内容合并。使用 Promise.all 等待所有文件读取完成，将结果拼接后生成新的 Blob 对象供下载。

js实现文件合并

Promise.all(readers).then((fileContents) => {
  const mergedContent = fileContents.join('\n'); // 自定义分隔符
  const blob = new Blob([mergedContent], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'merged.txt';
  a.click();
});

合并二进制文件（如图片/PDF）

处理二进制文件需使用 ArrayBuffer 或 Uint8Array 进行拼接。以下示例展示合并 PDF 文件的方法：

js实现文件合并

Promise.all(readers).then((arrayBuffers) => {
  const totalLength = arrayBuffers.reduce((acc, buf) => acc + buf.byteLength, 0);
  const mergedBuffer = new Uint8Array(totalLength);
  let offset = 0;
  arrayBuffers.forEach(buf => {
    mergedBuffer.set(new Uint8Array(buf), offset);
    offset += buf.byteLength;
  });
  const blob = new Blob([mergedBuffer], { type: 'application/pdf' });
  // 下载逻辑与文本文件相同
});

Node.js 环境实现

在服务器端使用 Node.js 时，可通过 fs 模块同步或异步合并文件：

const fs = require('fs');
const path = require('path');

function mergeFiles(inputDir, outputPath) {
  const files = fs.readdirSync(inputDir);
  const content = files.map(file => 
    fs.readFileSync(path.join(inputDir, file))
  ).join('\n');
  fs.writeFileSync(outputPath, content);
}

大文件分块处理

处理大文件时建议采用流式操作以避免内存溢出。Node.js 示例：

const outputStream = fs.createWriteStream('merged-large.txt');
files.forEach(file => {
  const inputStream = fs.createReadStream(file);
  inputStream.pipe(outputStream, { end: false });
  inputStream.on('end', () => {
    if (isLastFile) outputStream.end();
  });
});