как скачать файл excel при нажатии кнопки, используя пакет npm exceljs - PullRequest
Новая
       42

как скачать файл excel при нажатии кнопки, используя пакет npm exceljs

0 голосов
/ 29 апреля 2020

Я создал get api в nodejs, где я использую сторонний пакет excel js, get api работает нормально, и когда я вызываю get api в браузере как http://localhost:3000/createExcel, он загружает файл в виде таблицы Excel, но я хочу, чтобы этот файл загружался клиентом при нажатии кнопки загрузки, поэтому я создал простой файл html с кнопкой в ​​виде Download Excel File, и я вызываю get api для этой кнопки, используя ax ios, но ничего не происходит, это не загрузка файла?

Есть идеи, как решить эту проблему: -

Мой код на стороне сервера: - 

const MongoClient = require("mongodb");
const express = require("express");
const cors = require('cors');
const url = "mongodb://127.0.0.1:27017";
const Excel = require("exceljs");

const app = express();
app.use(cors);


MongoClient.connect(url, { useUnifiedTopology: true }, async (err, db) => {
  // Handle error
  if (err) {
    throw err;
  }
  let dbo = db.db("ronak");
  dbo
    .collection("excelData")
    .find({})
    .toArray((err, result) => {
      if (err) {
        throw err;
      }
      app.get("/createExcel", (req, res, next) => {
        var workbook = new Excel.Workbook();

        workbook.creator = "Me";
        workbook.lastModifiedBy = "Him";
        workbook.created = new Date(1985, 8, 30);
        workbook.modified = new Date();
        workbook.lastPrinted = new Date(2016, 9, 27);
        workbook.properties.date1904 = true;

        workbook.views = [
          {
            x: 0,
            y: 0,
            width: 10000,
            height: 20000,
            firstSheet: 0,
            activeTab: 1,
            visibility: "visible",
          },
        ];
        var worksheet = workbook.addWorksheet("Sales");
        worksheet.columns = [
          { header: "brand", key: "brand", width: 30 },
          { header: "emp_id", key: "emp_id", width: 10 },
          {
            header: "quarter_no_with_start_month",
            key: "quarter_no_with_start_month",
            width: 20,
          },
          { header: "target", key: "target", width: 20 },
          { header: "units", key: "units", width: 20 },
          { header: "value", key: "value", width: 20 },
        ];
        worksheet.eachRow({ includeEmpty: true }, function (row) {
          row.eachCell(function (cell, colNumber) {
            cell.font = {
              name: "Arial",
              family: 2,
              bold: false,
              size: 14,
            };
            cell.alignment = {
              vertical: "middle",
              horizontal: "center",
            };
          });
        });
        worksheet.addRows(result);

        res.setHeader(
          "Content-Type",
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        );
        res.setHeader(
          "Content-Disposition",
          "attachment; filename=" + "Report.xlsx"
        );
        workbook.xlsx.write(res).then((data) => {
          res.end();
          console.log("File write done", data);
        });
      });
      db.close();
    });
});


app.listen(3000, (err) => {
  if (err) {
    console.log("Error connecting to port 3000:", err);
  } else {
    console.log("Listening on port", 3000);
  }
});

А вот мой html код в vuejs: - 

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <!-- the star of the show - the Vue library! -->
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <script>
    // when life is settled, load up the fun stuff
    document.addEventListener('DOMContentLoaded', function () {
      new Vue({
        el: '#app',
        // define data - initial display text
        methods: {
            async downloadExcelFile() {
               const res = await axios.get('http://localhost:3000/createExcel')
                console.log(res);
            }
        }
      })
    })
  </script>
</head>
<body>
  <div id="app">
    <button v-on:click="downloadExcelFile">Download Excel File</button>
  </div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Запрос ajax никогда не сохраняет файлы автоматически для вас. Так что откройте URL http://localhost:3000/createExcel в новом окне. Попробуйте 

methods: {
        async downloadExcelFile() {
           window.open('http://localhost:3000/createExcel', '_blank');
        }
    }
0 голосов
/ 29 апреля 2020

Я рекомендую использовать file-saver: https://www.npmjs.com/package/file-saver

npm install --save file-server

Js код: 

import { saveAs } from 'file-saver';

//....//

const blob = new Blob([res], {
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
saveAs(blob, "file.xlsx");

Я думаю, что это также может быть полезно для используйте: https://github.com/Siemienik/xlsx-renderer Это должно сделать создание файла более простым и настраиваемым, поскольку вся структура файла создается в Excel и используется в качестве шаблона.

Редактировать: Насколько насколько я знаю, window.open(...,'_blank') часто блокируется браузером.

...