业务抽象

后端代码

const express = require('express');
const app = express();
const xlsx = require('node-xlsx').default;
app.use(express.static('public'))

const api = () => new Promise(resolve => {
    setTimeout(() => {
        resolve([
            ['zh-CN', 'en'],
        ])
    }, 5000)
});
// 动态生成excel/pdf/world/压缩包等资源文件
app.get('/excel', async (req, res) => {
    res.setHeader('Content-Type', 'application/xlsx')
    res.setHeader('Content-Disposition', 'attachment;filename=demo.xlsx')
    // 模拟 获取数据
    const data = await api();
    const buffer = xlsx.build([{ name: 'mySheetName', data: data }]);
    res.send(buffer); // json格式
})
app.listen(3000, () => { })

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="window.location.href='/excel'">下载1</button>
    <button onclick="download()">下载2</button>
    <script>
        function download() {
            window.open("/excel")
        }
    </script>
</body>
</html>

交互问题

href切换

动画.gif

浏览器输入框后回车,与ajax是不一样的,浏览器输入地址类型属于document,是三个documentLoader切换的过程,第一个documentLoader做拦截,第二个documentLoader发送请求,此时浏览器左上角进入loading状态,但可以随时取消，接收到数据后,才会进入到第三个documentLoader,根据content-type决定"渲染器",这里指进入到下载器里面

window.open 新建

动画.gif

遇上一个问题原理一样,但因为不需要渲染,最后会自动关闭

解决方案

flushHeader

先介绍正经的方案,flushHeader提前发送header即可

const express = require('express');
const app = express();
const xlsx = require('node-xlsx').default;
app.use(express.static('public'))

const api = () => new Promise(resolve => {
    setTimeout(() => {
        resolve([
            ['zh-CN', 'en'],
        ])
    }, 5000)
});
// 动态生成excel/pdf/world/压缩包等资源文件
app.get('/excel', async (req, res) => {
    res.setHeader('Content-Type', 'application/xlsx')
    res.setHeader('Content-Disposition', 'attachment;filename=demo.xlsx')
    res.flushHeaders()
    // 模拟 获取数据
    const data = await api();
    const buffer = xlsx.build([{ name: 'mySheetName', data: data }]);
    res.end(buffer);
})
app.listen(3000, () => { })