我已经在nodejs中创建了一个get api,我正在使用第三方软件包exceljs,该get api正常工作,当我在浏览器中将get api称为http://localhost:3000/createExcel
时,它将文件下载为excel工作表,但是我希望客户端单击下载按钮下载该文件,所以我创建了一个简单的html文件,其按钮为Download Excel File
,并且我使用axios调用了该按钮上的get api,但是没有发生任何事情,这不是在下载文件吗?] >
任何想法如何解决此问题:-
我的服务器端代码:-
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>
我已经在nodejs中创建了一个get api,在其中使用了第三方软件包exceljs,get api正常工作,当我在浏览器中将get api调用为http:// localhost:3000 / createExcel时,它是.. 。
ajax请求永远不会为您自动保存文件。因此,在新窗口中打开URL http://localhost:3000/createExcel
。尝试
我建议使用file-saver
:https://www.npmjs.com/package/file-saver