VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
    <div id="formio"></div>
  </div>
</div>

JavaScript

const formDefinition = {
  components: [{
      type: "textfield",
      input: true,
      key: "player",
      label: "Player"
    },
    {
      type: "number",
      input: true,
      key: "number",
      label: "Number"
    },
    {
      type: "textfield",
      key: "position",
      label: "Position",
      input: true,
    },
    {
      label: "Export to CSV",
      action: "custom",
      key: "exportToCSV",
      type: "button",
      custom: "exportToCSV(data)"
    }
  ],
  settings: {},
  properties: {},
}
Formio.createForm(document.getElementById('formio'), formDefinition);

const exportToCSV = (data) => {
  const headers = Object.keys(data).map((value) => value.toString());
  const values = Object.values(data).map((value) => value.toString());
  const csv = `${headers}\n${values}`
  download(csv);
}

const download = function(data) {

  // Creating a Blob for having a csv file format
  // and passing the data with type
  const blob = new Blob([data], {
    type: 'text/csv'
  });

  // Creating an object for downloading url
  const url = window.URL.createObjectURL(blob)

  // Creating an anchor(a) tag of HTML
  const a = document.createElement('a')

  // Passing the blob downloading url
  a.setAttribute('href', url)

  // Setting the anchor tag attribute for downloading
  // and passing the download file name
  a.setAttribute('download', 'download.csv');

  // Performing a download with click
  a.click()
}