当前位置:首页 > JavaScript

js实现文件合并

2026-03-16 03:48:00JavaScript

使用File API读取文件内容

通过HTML5的File API可以读取用户上传的文件内容。使用FileReader对象异步读取文件内容,将多个文件的内容合并后保存为一个新文件。

function mergeFiles(files, outputFileName) {
  const reader = new FileReader();
  const mergedContent = [];
  let filesProcessed = 0;

  files.forEach((file, index) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      mergedContent[index] = e.target.result;
      filesProcessed++;
      if (filesProcessed === files.length) {
        const blob = new Blob(mergedContent, { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = outputFileName;
        a.click();
      }
    };
    reader.readAsText(file);
  });
}

使用Node.js合并本地文件

在Node.js环境中,可以使用fs模块同步或异步地读取和写入文件,实现文件合并功能。

js实现文件合并

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

function mergeFiles(filePaths, outputPath) {
  const mergedContent = filePaths.map(filePath => {
    return fs.readFileSync(filePath, 'utf8');
  }).join('\n');

  fs.writeFileSync(outputPath, mergedContent);
}

// 使用示例
mergeFiles(['file1.txt', 'file2.txt'], 'merged.txt');

处理大文件的分块读取

对于大文件,可以采用分块读取的方式避免内存问题。这种方法特别适合Node.js环境处理大型文件。

js实现文件合并

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

async function mergeLargeFiles(filePaths, outputPath) {
  const writeStream = fs.createWriteStream(outputPath);

  for (const filePath of filePaths) {
    const readStream = fs.createReadStream(filePath);
    await new Promise((resolve, reject) => {
      readStream.pipe(writeStream, { end: false });
      readStream.on('end', resolve);
      readStream.on('error', reject);
    });
  }

  writeStream.end();
}

浏览器端多文件合并下载

在浏览器环境中,可以通过Blob对象将多个文件内容合并后提供下载。

function downloadMergedFile(texts, fileName) {
  const blob = new Blob(texts, { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

合并二进制文件

处理二进制文件(如图片、PDF等)时,需要使用ArrayBuffer来正确合并文件内容。

function mergeBinaryFiles(files, outputFileName) {
  const readers = files.map(file => {
    return new Promise(resolve => {
      const reader = new FileReader();
      reader.onload = e => resolve(e.target.result);
      reader.readAsArrayBuffer(file);
    });
  });

  Promise.all(readers).then(arrayBuffers => {
    const totalLength = arrayBuffers.reduce((sum, buffer) => sum + buffer.byteLength, 0);
    const mergedArray = new Uint8Array(totalLength);
    let offset = 0;

    arrayBuffers.forEach(buffer => {
      mergedArray.set(new Uint8Array(buffer), offset);
      offset += buffer.byteLength;
    });

    const blob = new Blob([mergedArray], { type: files[0].type });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
  });
}

标签: 文件合并js
分享给朋友:

相关文章

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: functio…

js怎么实现异步

js怎么实现异步

异步实现方法 JavaScript中实现异步操作主要通过以下几种方式: Promise Promise是ES6引入的异步解决方案,用于处理异步操作的成功或失败状态。 const promise =…

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…