🍜

React + ExcelJSで、Excel テンプレートを読込んで編集と保存

2 min read

概要:

前のExceljs関連で、準備したexcelファイルを読込んで、追加編集と保存する例になります。

  • excelファイルは、Http経由で axiosで読込む例です。

構成

  • react 17
  • Exceljs
  • axios

参考


出力の例

  • タイトルや、固定文字、罫線、背景色等は読込むテンプレートに。設定しておきます

  • public/temp4.xlsx に、保存しておきます。


準備

npm install --save exceljs
npm install --save axios

読込、編集保存

  • axios.getで、ファイル読込(type: arraybuffer)
  • workbook.xlsx.loadで、Uint8Array読込
  • workbook.getWorksheetで、シート名指定
  • 編集
  • 保存は、前と同様Blobに変換して。出力

https://gist.github.com/kuc-arc-f/6ac9ff047dda28a29d4fe67af51bae2f
xls6.tsx
/* XLS templete, read */
import React from 'react'
const ExcelJS = require('exceljs');
import axios from 'axios'

interface IProps {
  history:string[],
}
//
class Test extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
    this.state = {data: ''}
  }  
  componentDidMount(){
  }
  async clickHandler(e: any){
console.log("#clickHandler");
    e.preventDefault();
    const res = await axios.get("/temp4.xlsx", { responseType: "arraybuffer" });
    const data = new Uint8Array(res.data);
    const workbook = new ExcelJS.Workbook();
    await workbook.xlsx.load(data);
    //data
    const items = [
      {id: 1001, name: "みかん", price: 180 },
      {id: 1002, name: "りんご", price: 210 },
      {id: 1003, name: "バナナ", price: 170 },
    ]
//console.log(items);
    const worksheet = workbook.getWorksheet('sheet1');
    worksheet.pageSetup = {orientation:'portrait'};
    const startRow = 4;
    let iCount = 0;
    let row = worksheet.getRow(1);
    for (const item of items) {
      let pos = startRow + iCount;
      row = worksheet.getRow(pos);
      console.log(item);
      row.getCell(1).value = item.id;
      row.getCell(2).value = item.name;
      row.getCell(3).value = item.price;
      iCount += 1;
    }
    //save
    const uint8Array = await workbook.xlsx.writeBuffer();
//console.log(uint8Array);
    const blob = new Blob([uint8Array], {type: 'application/octet-binary'});
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `out.xlsx`;
    a.click();
    a.remove()    
  }
  render(){
    return(
    <div >
      <h1>xls6: read templete</h1>
      <hr />
      <button onClick={(e) => this.clickHandler(e)}>Read</button>
    </div>
    )
  }
}
export default Test;


関連のページ

https://zenn.dev/knaka0209/articles/c7427d9ee080d2

....

Discussion

ログインするとコメントできます