js怎么把json数据保存为word文件

JavaScript实现将JSON数据保存为Word文件的几种方法

在Web开发中,我们经常需要将数据导出为Word文档以便离线查看或进一步编辑，JSON作为一种轻量级的数据交换格式，常用于前后端数据交互，本文将介绍几种使用JavaScript将JSON数据保存为Word文件的方法，包括使用纯前端方案和结合后端服务的方案。

使用docx库（纯前端方案）

docx是一个流行的JavaScript库，可以让我们在浏览器中直接创建和操作Word文档。

安装docx库

首先需要安装docx库：

npm install docx

示例代码

import { Document, Packer, Paragraph, TextRun } from 'docx';
// 示例JSON数据
const jsonData = {
  name: "张三",
  age: 30,
  hobbies: ["阅读", "旅行", "编程"],
  address: {
    city: "北京",
    district: "朝阳区"
  }
};
// 将JSON数据转换为Word文档内容
const convertJsonToWord = (json) => {
  const paragraphs = [];
  // 添加标题
  paragraphs.push(new Paragraph({
    children: [new TextRun({ text: "个人信息", bold: true })],
  }));
  // 遍历JSON对象
  Object.keys(json).forEach(key => {
    const value = json[key];
    if (typeof value === 'object' && value !== null) {
      // 处理嵌套对象
      paragraphs.push(new Paragraph({
        children: [new TextRun({ text: `${key}:`, bold: true })],
      }));
      Object.keys(value).forEach(nestedKey => {
        paragraphs.push(new Paragraph({
          children: [new TextRun({ text: `  ${nestedKey}: ${value[nestedKey]}` })],
        }));
      });
    } else {
      // 处理简单值
      paragraphs.push(new Paragraph({
        children: [new TextRun({ text: `${key}: ${value}` })],
      }));
    }
  });
  return paragraphs;
};
// 创建文档
const doc = new Document({
  sections: [{
    properties: {},
    children: convertJsonToWord(jsonData),
  }],
});
// 生成并下载Word文档
Packer.toBlob(doc).then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.docx';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

使用FileSaver.js和html-docx-js（轻量级方案）

这是一个更轻量级的解决方案,适合简单的Word文档生成。

安装依赖

npm install file-saver html-docx-js

示例代码

import { saveAs } from 'file-saver';
import { documentToHtml } from 'html-docx-js';
// 示例JSON数据
const jsonData = {
  name: "李四",
  age: 25,
  skills: ["JavaScript", "React", "Node.js"]
};
// 将JSON转换为HTML
const jsonToHtml = (json) => {
  let html = '<html><body>';
  Object.keys(json).forEach(key => {
    const value = json[key];
    if (Array.isArray(value)) {
      html += `<p><strong>${key}:</strong> ${value.join(', ')}</p>`;
    } else {
      html += `<p><strong>${key}:</strong> ${value}</p>`;
    }
  });
  html += '</body></html>';
  return html;
};
// 转换并下载
const html = jsonToHtml(jsonData);
const converted = documentToHtml(html);
const blob = new Blob([converted], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
saveAs(blob, 'data.docx');

结合后端服务（适用于大数据量）

对于大型JSON数据或需要复杂格式的情况,可以结合后端服务处理。

后端示例（Node.js + Express）

const express = require('express');
const docx = require('docx');
const { Document, Packer, Paragraph, TextRun } = docx;
const app = express();
app.post('/export-word', express.json(), (req, res) => {
  const jsonData = req.body;
  const convertJsonToWord = (json) => {
    const paragraphs = [];
    Object.keys(json).forEach(key => {
      const value = json[key];
      if (typeof value === 'object' && value !== null) {
        paragraphs.push(new Paragraph({
          children: [new TextRun({ text: `${key}:`, bold: true })],
        }));
        Object.keys(value).forEach(nestedKey => {
          paragraphs.push(new Paragraph({
            children: [new TextRun({ text: `  ${nestedKey}: ${value[nestedKey]}` })],
          }));
        });
      } else {
        paragraphs.push(new Paragraph({
          children: [new TextRun({ text: `${key}: ${value}` })],
        }));
      }
    });
    return paragraphs;
  };
  const doc = new Document({
    sections: [{
      properties: {},
      children: convertJsonToWord(jsonData),
    }],
  });
  Packer.toBuffer(doc).then(buffer => {
    res.setHeader(
      'Content-Type',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    );
    res.setHeader('Content-Disposition', 'attachment; filename=data.docx');
    res.send(buffer);
  });
});
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

前端调用

// 示例JSON数据
const jsonData = {
  name: "王五",
  age: 28,
  projects: ["项目A", "项目B", "项目C"]
};
// 发送请求到后端
fetch('/export-word', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(jsonData),
})
.then(response => response.blob())
then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.docx';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

使用docxtemplater（模板驱动方案）

对于需要复杂格式和模板的场景,可以使用docxtemplater。

安装

npm install docxtemplater pizzip

示例代码

import PizZip from 'pizzip';
import Docxtemplater from 'docxtemplater';
// 示例JSON数据
const jsonData = {
  name: "赵六",
  age: 35,
  department: "技术部",
  skills: ["Java", "Python", "SQL"]
};
// 加载Word模板（假设有一个template.docx文件）
const loadTemplate = () => {
  // 这里应该从服务器或本地加载模板文件
  // 示例中使用的是虚拟的模板内容
  const content = `
    <w:document>
      <w:body>
        <w:p>
          <w:r>
            <w:t>{name}</w:t>
          </w:r>
        </w:p>
        <w:p>
          <w:r>
            <w:t>{age}</w:t>
          </w:r>
        </w:p>
        <w:p>
          <w:r>
            <w:t>{department}</w:t>
          </w:r>
        </w:p>
        <w:p>
          <w:r>
            <w:t>{skills}</w:t>
          </w:r>
        </w:p>
      </w:body>
    </w:document>
  `;
  return content;
};
const generateWord = () => {
  const zip = new PizZip(loadTemplate());
  const doc = new Docxtemplater(zip, {
    paragraphLoop: true,
    linebreaks: true,
  });
  doc.render(jsonData);
  const blob = doc.getZip().generate({
    type: 'blob',
    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.docx';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};
generateWord();

介绍了四种将JSON数据保存为Word文件的方法：