快捷導(dǎo)航

使用Node.js自動生成帶動態(tài)圖表的Word文檔

更新時間：2024年03月19日 17:11:41 作者：不錯的想念

在現(xiàn)代軟件開發(fā)中,動態(tài)生成?Word?文檔是一項非常常見的需求,本文將結(jié)合Node.js和ECharts實現(xiàn)自動生成帶動態(tài)圖表的Word文檔,感興趣的可以了解下

使用 Node.js 生成帶動態(tài)圖表的 Word 文檔

在現(xiàn)代軟件開發(fā)中，動態(tài)生成 Word 文檔是一項非常常見的需求。尤其是在報告、數(shù)據(jù)分析、項目文檔等方面，需要將數(shù)據(jù)以圖表形式展示在 Word 文檔中。而 ECharts 提供了豐富的圖表類型和可定制化的功能，與 Node.js 結(jié)合使用，可以輕松地實現(xiàn)在 Word 文檔中插入動態(tài)的 ECharts 圖表。本文將介紹如何使用 Node.js 結(jié)合 ECharts 實現(xiàn)這一功能。

準備工作

首先，確保你已經(jīng)安裝了 Node.js 和 npm，然后創(chuàng)建一個空項目并初始化 npm：

mkdir generate-word-docx
cd generate-word-docx
npm init -y

接下來，安裝我們需要的依賴：

npm install http fs path pizzip docxtemplater open-docxtemplater-image-module canvas echarts

編寫代碼

下面是生成帶動態(tài)圖表的 Word 文檔的代碼示例：

const http = require('http');
const fs = require('fs');
const path = require('path');
const PizZip = require('pizzip');
const Docxtemplater = require('docxtemplater');
const ImageModule = require('open-docxtemplater-image-module');
const { createCanvas } = require('canvas');
const echarts = require('echarts');

// 定義替換數(shù)據(jù)
const data = {
  name1: 'John Doe',
  name2: 'Jane Smith',
  // 在這里添加柱狀圖數(shù)據(jù)
  image: './chart.png' // 替換為你的圖片 URL 地址
};

// 定義模板文件路徑
const templatePath = 'template.docx';

// 創(chuàng)建 HTTP 服務(wù)器
const server = http.createServer((req, res) => {
  // 填充 Word 文檔模板并生成新的 Word 文檔
  generateWord(templatePath, data, (err, outputPath) => {
    if (err) {
      res.writeHead(500, { 'Content-Type': 'text/plain' });
      res.end('Internal Server Error');
      return;
    }

    // 將生成的 Word 文檔作為響應(yīng)發(fā)送給客戶端
    const fileStream = fs.createReadStream(outputPath);
    res.setHeader('Content-disposition', 'attachment; filename=output.docx');
    res.setHeader('Content-type', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
    fileStream.pipe(res);
  });
});

// 監(jiān)聽端口
const port = 3000;
server.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

// 填充 Word 文檔模板并生成新的 Word 文檔
function generateWord(inputPath, data, callback) {
  try {
    // 讀取模板文件內(nèi)容
    const content = fs.readFileSync(inputPath, 'binary');

    // 初始化 PizZip
    const zip = new PizZip(content);

    // 初始化 Docxtemplater
    const doc = new Docxtemplater();

    // 圖片替換配置
    const opts = {
      centered: false,
      getImage: function (tagValue, tagName) {
        // 直接返回圖片地址
        return fs.readFileSync(path.join(__dirname, tagValue));
      },
      getSize: function (img, tagValue, tagName) {
        // 設(shè)置圖片大小，這里使用默認大小 [250, 250]
        return [250, 250];
      }
    };

    // 添加圖片模塊
    doc.attachModule(new ImageModule(opts));

    // 加載模板文件
    doc.loadZip(zip);

    // 設(shè)置替換數(shù)據(jù)
    doc.setData(data);

    // 渲染數(shù)據(jù)
    doc.render();

    // 生成新的 Word 文檔
    const outputPath = 'output.docx';
    const buf = doc.getZip().generate({ type: 'nodebuffer' });

    // 寫入新的 Word 文檔
    fs.writeFileSync(outputPath, buf);

    // 調(diào)用回調(diào)函數(shù)，傳遞生成的 Word 文檔路徑
    callback(null, outputPath);
  } catch (error) {
    // 如果發(fā)生錯誤，則調(diào)用回調(diào)函數(shù)，并傳遞錯誤對象
    callback(error);
  }
}

// 使用 ECharts 生成柱狀圖圖片
function generateChartImage() {
  // 創(chuàng)建畫布
  const canvas = createCanvas(800, 600);
  const ctx = canvas.getContext('2d');

  // 將 ECharts 圖表繪制到畫布上
  echarts.setCanvasCreator(() => canvas);
  const chart = echarts.init(canvas, null, { renderer: 'canvas' });
  chart.setOption({
    title: {
      text: '柱狀圖示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [{
      name: '銷量',
      type: 'bar',
      data: [5, 20, 36, 10, 10]
    }]
  });

  // 將畫布轉(zhuǎn)換為 PNG 圖片并保存到文件
  const buffer = canvas.toBuffer('image/png');
  fs.writeFileSync('chart.png', buffer);
}

// 調(diào)用函數(shù)生成柱狀圖圖片
generateChartImage();