используйте javascript, чтобы создать файл csv, заархивируйте его, затем загрузите - PullRequest
Новая
       67

используйте javascript, чтобы создать файл csv, заархивируйте его, затем загрузите

1 голос
/ 18 июня 2020

Я новичок от ie до javascript, но при поиске в Google я видел код для создания файла CSV и еще один для заархивирования файла. Они оба работают отлично. Код, создающий файл CSV, не заархивирует его, а код, создающий файл ZIP, не создает файл CSV. Мне нужно объединить два кода, чтобы я мог создать файл CSV с веб-страницы, заархивировать его, а затем разрешить пользователю загрузить его. Я попытался поиграть с переменной blob, но безуспешно. код, который я использую для создания файла CSV, приведен ниже;

кредит на https://www.youtube.com/watch?v=cpHCv3gbPuk

<script src="scripts/TableCSVExporter.js"></script> 
<table id="dataTable" class="table">
    <thead>
        <tr>
            <th>Rank</th>
            <th>Name</th>
            <th>Points</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Steven Soto</td>
            <td>2,462</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Alfred, Hines</td>
            <td>1,930</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jeff, "The Champion" Foster</td>
            <td>1,656</td>
            <td>Red</td>
        </tr>
    </tbody>
</table>

<button id="btnExportToCsv" type="button" class="button">Export to CSV</button>

<script>
    const dataTable = document.getElementById("dataTable");
    const btnExportToCsv = document.getElementById("btnExportToCsv");

    btnExportToCsv.addEventListener("click", () => {
        const exporter = new TableCSVExporter(dataTable);
        const csvOutput = exporter.convertToCSV();
        const csvBlob = new Blob([csvOutput], { type: "text/csv" });
        const blobUrl = URL.createObjectURL(csvBlob);
        const anchorElement = document.createElement("a");

        anchorElement.href = blobUrl;
        anchorElement.download = "table-export.csv";
        anchorElement.click();

        setTimeout(() => {
            URL.revokeObjectURL(blobUrl);
        }, 500);
    });
</script>

Затем вот код для заархивирования файла с помощью JSZip 

<script src="scripts/jszip.js"></script>
<script src="scripts/FileSaver.js"></script>
<script type="text/javascript">function pack(){
const URLS = [
    'https://vr.josh.earth/assets/2dimages/saturnv.jpg'//,
    //'https://vr.josh.earth/assets/360images/hotel_small.jpg'
]
saveToZip('project.zip',URLS)
function saveToZip (filename, urls) {
    const zip = new JSZip()
    const folder = zip.folder('project')
    urls.forEach((url)=> {
        const blobPromise = fetch(url).then(r => {
            if (r.status === 200) return r.blob()
            return Promise.reject(new Error(r.statusText))
        })
        const name = url.substring(url.lastIndexOf('/'))
        folder.file(name, blobPromise)
    })  
    zip.generateAsync({type:"blob"})
        .then(blob => saveAs(blob, filename))
        .catch(e => console.log(e));
}}

Как я могу работать с этим кодом, чтобы создать файл CSV, заархивировать его, а затем загрузить заархивированный файл с веб-сайта? Есть ли альтернативный более эффективный подход?

...