<h1>Input:</h1>
<pre id="data" style="padding: 8px; border: whitesmoke double 4px; background-color: lightgray; ">
[
    {
        "Name": "万历十五年",
        "Author": "黃仁宇",
        "Subject": "History",
        "Publication Date": 1981
    },
    {
        "Name": "L'Ancien Régime et la Révolution",
        "Author": "Alexis de Tocqueville",
        "Subject": "History",
        "Publication Date": 1866
    },
    {
        "Name": "A Brief History of Time",
        "Author": "Stephen Hawking",
        "Subject": "Cosmology",
        "Publication Date": 1988
    },
    {
        "Name": "失楽園",
        "Author": "渡辺淳一",
        "Subject": "Novel",
        "Publication Date": 1995
    }
]
</pre>
<label>file name: <input id="fileName" value="books" placeholder="file name"/></label>
<label>CSV delimiter: <input id="delimiter" value="," placeholder="CSV Delimiter"/></label>
<br />
<button onclick="downloadText('txt')">download plain text file</button>
<button onclick="downloadText('css')">download css file</button>
<button onclick="downloadText('html')">download html file</button>
<button onclick="download('json')">download JSON file</button>
<button onclick="download('csv')">download CSV file</button>
<button onclick="download('xls')">download XLS file(Excel)</button>
<button onclick="download('xml')">download XML file</button>
<hr />
<button onclick="show('txt')">show plain text file</button>
<button onclick="show('css')">show css file</button>
<button onclick="show('html')">show html file</button>
<button onclick="show('json')">show JSON file</button>
<button onclick="show('csv')">show CSV file</button>
<button onclick="show('xls')">show XLS file(Excel)</button>
<button onclick="show('xml')">show XML file</button>
<hr />
<label>
    Use fields "Name", "Author", "subject":
    <input id="useFields" type="checkbox" />
</label>
<h1>Output:</h1>
<pre id="content" style="padding: 8px; border: whitesmoke double 4px; background-color: lightgray; "></pre>

<script src="../dist/umd/index.js"></script>
<script>
    const exportFromJSON = window.exportFromJSON
    const $data = document.getElementById('data')
    const $fileName = document.getElementById('fileName')
    const $delimiter = document.getElementById('delimiter')
    const $content = document.getElementById('content')
    const $useFields = document.getElementById('useFields')

    document.body.addEventListener('click', (e) => {
        if (e.target === $data) {
            $data.setAttribute('contenteditable', 'true')
        } else {
            $data.setAttribute('contenteditable', 'false')
        }
    })

    function download (exportType) {
        const fileName = $fileName.value
        const delimiter = $delimiter.value
        const data = JSON.parse($data.innerText)
        const fields = $useFields.checked ? ['Name', 'Author', 'Subject'] : []

        exportFromJSON({ data, fileName, fields, exportType })
    }

    function downloadText (exportType) {
        const fileName = $fileName.value

        exportFromJSON({ data: $data.innerText, fileName, delimiter, exportType, })
    }

    function show (exportType) {
        const fileName = $fileName.value
        const delimiter = $delimiter.value
        const data = JSON.parse($data.innerText)
        const fields = $useFields.checked ? ['Name', 'Author', 'Subject'] : []

        const output = exportFromJSON({ data, fileName, fields, delimiter, exportType, processor: content => content })
        $content.innerText = output
    }
</script>