如何使用Fetch或Axios从Frontend（VUEJS）从服务器下载大文件。在获取时同时下载

Question

我的前端（用vuejs编写）需要从服务器下载大文件（〜1GB，但可能会变大）。我目前的方法是使用 streamsaver 但是，尽管我在测试时下载文件时似乎可以正常工作 时似乎很难

在本地，在其他设备上测试它 必须在下载操作开始之前完成，这实际上不是我需要的解决方案。我希望能够同时启动下载。

const fileStream = streamSaver.createWriteStream(fileName);
const res = await fetch("gets/download-file?" + new URLSearchParams({
    relPath: path.join(forPath, fileName)
}))
const readableStream = res.body
if (window.WritableStream && readableStream.pipeTo) {
    return readableStream.pipeTo(fileStream)
        .then(() => console.log('done writing'))
}
window.writer = fileStream.getWriter()

const reader = res.body.getReader()
const pump = () => reader.read()
    .then(res => res.done
        ? window.writer.close()
        : window.writer.write(res.value).then(pump))

pump()

我的服务器是用express.js编写的，我也尝试从服务器端流式传输数据，

router.get("/download-file", checkPath, async (req, res) => {
    try {
        const relativePath = req.query.relPath;
        const fullPath = path.join(UPLOAD_FOLDER, relativePath);
        console.log(green("Downloading: ", fullPath))
        // res.sendFile(fullPath, (err) => {
        //     if (err) console.log(red(err))
        // })
        res.setHeader('Content-Type', 'application/octet-stream');
        fs.createReadStream(fullPath).pipe(res);
    } catch (err) {
        console.log(red(err))
    }
})

我已经看到和其他类似的答案，使用streamsaver-js”>流式大斑点文件，但它们似乎都有类似的缺陷，即必须完成fetch请求并等待直到那时等待下载之前，不是我想要的。

Answer 1

我想出了如何做到这一点，所以我要回答我的问题。
基本上，您应该让浏览器处理下载，而不是使用fetch API并尝试使用JavaScript下载文件。您只需要从后端提供文件 - res..download或node中的sendfile，然后直接导航到文件（例如锚固标签的方式），

并根据要求添加示例。

因此，在您的客户端上，假设您有一个下载按钮下载一些文件路径，因此您将拥有看起来像该

客户端的

function downloadFile(event: MouseEvent) {
    const fileName = figure.querySelector("figcaption")?.dataset.filename;
    const fullpath = window.location.pathname + fileName;
    if (fileName) {
        window.location.href = `/download?pathname=${fullpath}`;
    }
}

代码，为此，您的服务器必须在该特定位置上使用请求的文件，即/download？ pathName = $ {fullpath}

服务器 - express

main.ts

import { router as downloadRouter } from "@routes/download";
app.use("/download", downloadRouter);

这是一条路线 - 下载.ts

router.get("/", async (req: express.Request, res: express.Response) => {
    const pathname = req.query.pathname as string;
    const baseFolder = (await settings).uploadfolder;
    const fullPath = path.join(baseFolder, pathname);
    console.log("fullPath: ", fullPath);
    res.sendFile(fullPath);
});