Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

このエントリは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:

re-fort
多部未華子をスカウトした人は本当に才能があると思う
https://re-fort.net/
freee
スモールビジネスのバックオフィス業務をテクノロジーで自動化し、日本のスモールビジネスを元気にする
http://www.freee.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away