r-wasm/quarto-live

Read data directly embedded in the page via downloadthis

coatless opened this issue · 0 comments

The idea here is to use something like downloadthis or quarto-downloadthis to embed the data set directly in the document while providing a download link. It may be advantageous to then load the data into webR on document load.

For example, the following code makes available the mtcars data set:

Example HTML from `downloadthis` to download a single data set
<button class="btn btn-default" onclick="
    async function downloadFile(event) {
      event.preventDefault();
      try {
        const response = await fetch('data:text/csv;base64,bXBnO2N5bDtkaXNwO2hwO2RyYXQ7d3Q7cXNlYzt2czthbTtnZWFyO2NhcmIKMjEsMDs2OzE2MCwwOzExMDszLDkwOzIsNjIwOzE2LDQ2OzA7MTs0OzQKMjEsMDs2OzE2MCwwOzExMDszLDkwOzIsODc1OzE3LDAyOzA7MTs0OzQKMjIsODs0OzEwOCwwOzkzOzMsODU7MiwzMjA7MTgsNjE7MTsxOzQ7MQoyMSw0OzY7MjU4LDA7MTEwOzMsMDg7MywyMTU7MTksNDQ7MTswOzM7MQoxOCw3Ozg7MzYwLDA7MTc1OzMsMTU7Myw0NDA7MTcsMDI7MDswOzM7MgoxOCwxOzY7MjI1LDA7MTA1OzIsNzY7Myw0NjA7MjAsMjI7MTswOzM7MQoxNCwzOzg7MzYwLDA7MjQ1OzMsMjE7Myw1NzA7MTUsODQ7MDswOzM7NAoyNCw0OzQ7MTQ2LDc7NjI7Myw2OTszLDE5MDsyMCwwMDsxOzA7NDsyCjIyLDg7NDsxNDAsODs5NTszLDkyOzMsMTUwOzIyLDkwOzE7MDs0OzIKMTksMjs2OzE2Nyw2OzEyMzszLDkyOzMsNDQwOzE4LDMwOzE7MDs0OzQKMTcsODs2OzE2Nyw2OzEyMzszLDkyOzMsNDQwOzE4LDkwOzE7MDs0OzQKMTYsNDs4OzI3NSw4OzE4MDszLDA3OzQsMDcwOzE3LDQwOzA7MDszOzMKMTcsMzs4OzI3NSw4OzE4MDszLDA3OzMsNzMwOzE3LDYwOzA7MDszOzMKMTUsMjs4OzI3NSw4OzE4MDszLDA3OzMsNzgwOzE4LDAwOzA7MDszOzMKMTAsNDs4OzQ3MiwwOzIwNTsyLDkzOzUsMjUwOzE3LDk4OzA7MDszOzQKMTAsNDs4OzQ2MCwwOzIxNTszLDAwOzUsNDI0OzE3LDgyOzA7MDszOzQKMTQsNzs4OzQ0MCwwOzIzMDszLDIzOzUsMzQ1OzE3LDQyOzA7MDszOzQKMzIsNDs0Ozc4LDc7NjY7NCwwODsyLDIwMDsxOSw0NzsxOzE7NDsxCjMwLDQ7NDs3NSw3OzUyOzQsOTM7MSw2MTU7MTgsNTI7MTsxOzQ7MgozMyw5OzQ7NzEsMTs2NTs0LDIyOzEsODM1OzE5LDkwOzE7MTs0OzEKMjEsNTs0OzEyMCwxOzk3OzMsNzA7Miw0NjU7MjAsMDE7MTswOzM7MQoxNSw1Ozg7MzE4LDA7MTUwOzIsNzY7Myw1MjA7MTYsODc7MDswOzM7MgoxNSwyOzg7MzA0LDA7MTUwOzMsMTU7Myw0MzU7MTcsMzA7MDswOzM7MgoxMywzOzg7MzUwLDA7MjQ1OzMsNzM7Myw4NDA7MTUsNDE7MDswOzM7NAoxOSwyOzg7NDAwLDA7MTc1OzMsMDg7Myw4NDU7MTcsMDU7MDswOzM7MgoyNywzOzQ7NzksMDs2Njs0LDA4OzEsOTM1OzE4LDkwOzE7MTs0OzEKMjYsMDs0OzEyMCwzOzkxOzQsNDM7MiwxNDA7MTYsNzA7MDsxOzU7MgozMCw0OzQ7OTUsMTsxMTM7Myw3NzsxLDUxMzsxNiw5MDsxOzE7NTsyCjE1LDg7ODszNTEsMDsyNjQ7NCwyMjszLDE3MDsxNCw1MDswOzE7NTs0CjE5LDc7NjsxNDUsMDsxNzU7Myw2MjsyLDc3MDsxNSw1MDswOzE7NTs2CjE1LDA7ODszMDEsMDszMzU7Myw1NDszLDU3MDsxNCw2MDswOzE7NTs4CjIxLDQ7NDsxMjEsMDsxMDk7NCwxMTsyLDc4MDsxOCw2MDsxOzE7NDsyCg==');
        if (!response.ok) throw new Error('Network response failed');
        const blob = await response.blob();
        const blobUrl = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = 'mtcars dataset.csv';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.dispatchEvent(new MouseEvent('click'));
        document.body.removeChild(a);
        setTimeout(() => {
          window.URL.revokeObjectURL(blobUrl);
        }, 100);
        return false;
      } catch (error) {
        console.error('Download failed:', error);
        alert('Download failed. Please try again.');
      }
    }
    downloadFile(event);
  " has_icon="TRUE"><i class="fa fa-save"></i> Download data as csv</button>

This code be handled perhaps with a modified ojs_define() or Garrick's new base64 shortcode extension.