엑셀의 데이터로부터 html 파일을 대량으로 작성하는 안건이 있었으므로,
그 때를 메모 겸해 써 보았습니다.

소개

이번에는 Grunt에서 작업을했기 때문에 Grunt에서의 방법입니다.
주요 모듈은 이것입니다.

· grunt-mustache-render
· xlsx

간단한 구성으로는 다음과 같은 느낌입니다.
(1) xlsx 모듈로 데이터 검색
(2) grunt-mustache-render에서 사용할 수 있도록 데이터를 정형
(3) grunt-mustache-render로 파일 생성

다양한 설정

엑셀 파일 형식

1행째를 헤더,
2행째 이후가 생성 파일의 데이터(1레코드 1파일)
에서 엑셀을 만들고 있습니다.

템플릿 설정

template.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{タイトル}}</title>
    <link rel="stylesheet" href="/css/{{パラメータ1}}_{{パラメータ2}}_{{パラメータ3}}.css">
</head>
<body>
    <header>
        <h1>{{タイトル}}</h1>
    </header>
    <div>
        <img src="{{&画像}}" alt="{{タイトル}}">
    </div>
</body>
</html>

{{ }}로 묶은 부분이 엑셀로부터의 데이터를 흘려 보내는 부분이 됩니다.
{{ }} 안의 이름은 엑셀로 작성한 헤더명으로 지정합시다.

Grunt 설정

Gruntfile.js

'use strict';
var XLSX = require('xlsx');
module.exports = function(grunt) {
  grunt.initConfig({
    clean: {
        run: ['./output']
    },
    mustache_render: {
        run: {
            files: (function() {
                // 設定
                var inpFile = 'サンプル.xlsx';
                var inpSheet = 'Sheet1';

                // ファイル読み込み
                var data = XLSX.readFile(inpFile);
                var sheet = data.Sheets[inpSheet];

                // ファイル内容整形
                var json = XLSX.utils.sheet_to_json(sheet);

                var files = [];
                for (var i=0, j=json.length; i<j; i++){
                    var pageData = json[i];

                    // files配列にオブジェクトを追加
                    files.push({
                        // ページデータ
                        data: pageData,
                        // テンプレートファイルを指定
                        template: './template.html',
                        // 生成するhtmlの場所と名前を設定
                        dest: './output/' + pageData.パラメータ1 + '_' + pageData.パラメータ2 + '_' + pageData.パラメータ3 + '.html'
                    });
                }
                // 配列を返却
                return files;
            }())
        }
    }
  });
  grunt.loadNpmTasks('grunt-mustache-render');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.registerTask('run', ['clean', 'mustache_render']);
};

clean을 도입하고 있습니다만, 이것은 기호로 부디.
위에서는 파일을 생성하기 전에 한 번 디렉토리 안을 비웁니다.

Gruntfile.js (발췌 1)

// 設定
var inpFile = 'サンプル.xlsx';
var inpSheet = 'Sheet1';

위 부분에서는
inpFile은 로드할 엑셀을 지정하고,
inpSheet는 위의 파일에서 시트 이름을 지정합니다.

덧붙여서, 이번에는 특별히 설정을 하고 있지 않기 때문에, 루트의 디렉토리는 Gruntfile.js가 두고 있는 계층이 되고 있습니다.

Gruntfile.js (발췌 2)

// files配列にオブジェクトを追加
files.push({
  // ページデータ
  data: pageData,
  // テンプレートファイルを指定
  template: './template.html',
  // 生成するhtmlの場所と名前を設定
  dest: './output/' + pageData.パラメータ1 + '_' + pageData.パラメータ2 + '_' + pageData.パラメータ3 + '.html'
});

이 블록에서,
실제로 파일을 출력할 때의 데이터를 정형하고 있습니다.
data: pageData,는 읽은 엑셀의 1 레코드 분의 데이터를 저장합니다.
각 레코드의 파라미터에 대한 액세스는pageData.[パラメータ名]에서 가능합니다.

매개변수를 가공해야 하는 경우,
이 블록으로 해보자.
물론 pageData 에의 파라미터 추가도 가능합니다.

막상 실행

위 설정에서

grunt run

에서 작업이 실행됩니다.

생성된 파일

001_A01_BS000.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>サンプル１</title>
    <link rel="stylesheet" href="/css/001_A01_BS000.css">
</head>
<body>
    <header>
        <h1>サンプル１</h1>
    </header>
    <div>
        <img src="/img/sample01.png" alt="サンプル１">
    </div>
</body>
</html>

우선, 이런 방법도 있다고 하는 것으로~

샘플

이번에 작성한 샘플 데이터를 github에 올리고 있습니다.
htps : // 기주 b. 코 m / 구로 쿠마 29 / xlsx - 벽돌 r

Reference

이 문제에 관하여(grunt-mustache-render를 사용하여 엑셀에서 HTML을 양산하고 싶습니다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kurokuma/items/ef876c55ba09a0d96517

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

grunt-mustache-render를 사용하여 엑셀에서 HTML을 양산하고 싶습니다!

소개