36
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

NIJIBOXAdvent Calendar 2017

Day 3

xlsx-populateを使ってクライアントサイドでExcelを編集する

Last updated at Posted at 2017-12-02

このエントリはNIJIBOX Advent Calendar 2017の3日目です。

:point_up: はじめに

IE、Edge、Excelから逃れられない人生を送っている皆様こんにちは:smiling_imp:

:whale: 今回の要件

  • Excelをダウンロードしたい
  • Excelテンプレートがすでにあるので、そこに値を埋め込めればいい
  • ある一定の時期のみ負荷がめっちゃかかる

最後の要件があったので、サーバ負荷をかけないように、
クライアントサイドでExcelを出力するのもありでは?と思い調べてみました。

:dark_sunglasses: ライブラリ選定

js-xlsx

一番starが多そう。
単純に読み込み、出力をしたもののテンプレートのスタイル情報が失われてしまった。
issueを読んでいると、このような用途であれば、別ライブラリがいいよと書いてあったので、それを試してみることに。

xlsx-template

試してみたものの値が置き換わらなかった...。

xlsx-populate

望んでいた結果が得られました。

どれもNode.jsでもブラウザでも動くよといった感じでした。

:bar_chart: xlsx-populateについて

リポジトリにも書いてありますが、このライブラリでは従来のライブラリのように、
XMLをdeserialize → モデル化 → 編集 → XMLにserialize
というフローではなく、直接XMLを操作するみたいです。

そのため、スタイル情報などが保持されたままであると。
今回はこの恩恵に大いにあずかった感じです:heart_eyes:

:warning: 今あるXMLの構造体を操作して修正していくので、
例えばワークシートのコピーなどは、このライブラリはサポートしていないです。
(シートのコピーを何個か作っておいて、不要なものを消したりといったことが必要)

詳しくはここを読んで下さい。

:eyes: 確認

:globe_with_meridians: ブラウザ互換性

IE11, Edge14, FF57(Mac), Chrome62(Mac)では問題なさそうでした。

:desktop: 性能

10000セルへの書き込みをして1秒かからないくらいでした。
intel core i5のmemory 16GBマシンでの検証なので、数値は参考程度で。

:cupid: デモ

デモ

  • テンプレートに値を入れ込む
  • 10000セルに書き込む
  • zip化する

の3パターンが試せるデモをあげました。
確認してみてください:blush:

36
32
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?