<div class="container">
  <h1 class="title my-6">SpreadJS 템플릿 자동 완성</h1>
  <h2 class="subtitle mb-6">SpreadJS 템플릿 디자이너에서 생성한 엑셀 템플릿을 불러와 데이터 바인딩 만으로 자동완성 견적서를 만드는 샘플 입니다.</h2>
  
  <div class="buttons m-4">
  <button class="button is-primary" onclick="ExcelExport()">
    Excel 내보내기
  </button>
  <button class="button is-link" onclick="ExcelPDF()">
    PDF 내보내기
  </button>
</div>
<div id="ss" style="width:100%;height:600px"></div>  
</div>

// 테스트 데이터 생성
var productData = {
  "date":"2021-01-12", 
  "name":"Lucas", 
  "product":[
    {"code":"SJS13M02", "name":"SpreadJS 13 Developer License with Maintenance - New License", "quantity": 1, "amount": 1999000, "netprice": 1999000, "vat": 1999000/2, "sum": 1999000+1999000/2},
    {"code":"SJS13DMD01", "name":"SpreadJS 13 - Distribution License (Main Domain) - New License", "quantity": 2, "amount": 2332000, "netprice": 4664000, "vat": 2332000/2, "sum": 2332000+2332000/2}
  ]
}

var spread, excelIO;

// SpreadJS 선언 및 양식 불러오기
$(document).ready(function () {

  spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  excelIO = new GC.Spread.Excel.IO();

  $.ajax({
    //템플릿 불러오기
    url: "https://assets.codepen.io/975719/template_sample.ssjson",
    datatype: "json",
    success: function (data) {
      //here to load ssjson file.
      spread.suspendPaint();
      spread.fromJSON(JSON.parse(data));
      //데이터 소스 설정
      var source = new GC.Spread.Sheets.Bindings.CellBindingSource(productData);
      spread.getSheet(0).setDataSource(source);
      spread.resumePaint();
    },
    error: function (ex) {
      alert('Exception:' + ex);
    }
  });

  fetch("https://assets.codepen.io/975719/malgun.ttf")
    .then(function(response) {
    return response.arrayBuffer();
  })
    .then(function(arrayBuffer) {
    var base64String = _arrayBufferToBase64(arrayBuffer);
    var fonts = {
      normal: base64String
    };
    GC.Spread.Sheets.PDF.PDFFontsManager.registerFont('malgun', fonts);
    GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont = function (font) {
        return fonts.normal;
    }
  });
});

function ExcelExport(){

  var fileName = getToday()+"_견적서";  

  if (fileName.substr(-5, 5) !== '.xlsx') {
    fileName += '.xlsx';
  }
  var json = spread.toJSON({
    includeBindingSource : true
  });
  excelIO.save(json, function (blob) {
    saveAs(blob, fileName);
  }, function (e) {
    console.log(e);
  });

}


function ExcelPDF(){

  var fileName = getToday()+"_견적서";  

  if (fileName.substr(-5, 5) !== '.pdf') {
    fileName += '.pdf';
  }

  spread.savePDF(
    function (blob) {
      saveAs(blob, fileName);
    },
    console.log,
    {
      title: 'Quotation',
      author: 'GrapeCity',
      subject: 'Quotation',
      keywords: 'Quotation',
      creator: 'GrapeCity'
    });

}

// 결적서 파일명에 날짜정보 추가 
function getToday(){
  var date = new Date(); 
  var year = date.getFullYear(); 
  var month = new String(date.getMonth()+1); 
  var day = new String(date.getDate()); 

  if(month.length == 1){ 
    month = "0" + month; 
  } 
  if(day.length == 1){ 
    day = "0" + day; 
  } 

  return year+ month + day;

}

function _arrayBufferToBase64(buffer) {
  var binary = "";
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

External CSS

  1. https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2016colorful.14.0.9.css
  2. https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css

External JavaScript

  1. https://code.jquery.com/jquery-latest.js
  2. https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.14.0.9.min.js
  3. https://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.14.0.9.min.js
  4. https://cdn.grapecity.com/spreadjs/hosted/scripts/resources/ko/gc.spread.sheets.resources.ko.14.0.9.min.js
  5. https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.14.0.9.min.js
  6. https://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.14.0.9.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
  8. https://www.grapecity.co.kr/files/license/codepen_v14.js