くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > javascript > xlsx-populateを使ってテンプレートからExcelファイルを生成する(Nuxt+JavaScript)

xlsx-populateを使ってテンプレートからExcelファイルを生成する(Nuxt+JavaScript)

javascript Nuxt.js Excel

以前、SheetJS(xlsx)でExcelファイルの生成を試してみたけど、
スタイルのコピーや設定ができない課題の解決のため、調べたときの備忘録。

xlsx-populateだと、スタイルの操作もできるっぽい。

インストール

$ npm i xlsx-populate

xlsx-populateの使い方

外部URLからWorkbookの取得

外部ファイルを読み込むときは、以下の2点に注意

  • responseTypeをarraybufferで取得
  • XlsxPopulate.fromDataAsyncで読み込み
import * as XlsxPopulate from "xlsx-populate";
import axios from "axios";

async functon getWorkbook(url: string) {
  const res = await $axios.get(url, { responseType: "arraybuffer" });

  const workbook = await XlsxPopulate.fromDataAsync(res.data);
  return workbook;
}

XlsxPopulate.fromFileAsyncを使うと、ファイルからも読み込める。

refs:
・Browser Usage
・XlsxPopulate.fromDataAsync(data, [opts])

WorkbookからWorksheetの取得

function getWorksheet(workbook: any) {
  const sheetIndex = 0;
  return workbook.sheet(sheetIndex);
}

refs:
・Usage
・workbook.sheet(sheetNameOrIndex)

セルに書き込む

function writeCell(worksheet: any, postion: string, val: any) {
  worksheet.cell(postion).value(val);
}

refs:
・Usage
・cell.value(value)

ファイルをダウンロードする

ダウンロードには、file-saverを使う。

import { saveAs } from "file-saver";

async function download(worksheet: any, fileName: string) {
  const wbout = await workbook.outputAsync();
  const blob = new Blob([wbout], { type: "application/octet-stream" });
  saveAs(blob, fileName);
}

refs:
・Browser Usage
・workbook.outputAsync([type])

NuxtやClient Sideで使う場合

ブラウザで使おうとすると、以下のようなエラーが出る時がある。

This dependency was not found:
* fs in ./node_modules/xlsx-populate/lib/Workbook.js
To install it, you can run: npm install --save fs

以下のissueにあるとおり、webpack側で設定が必要とのこと。

Nuxtの場合は、build.extendで設定すればOK。

import { Configuration } from "@nuxt/types";

const config: Configuration = {
  // ...
  build: {
    extend(config, ctx) {
      if (ctx.isClient) {
        config.node = { fs: "empty" };
      }
    }
  },
};

export default config;

以上!!

参考にしたサイト様