为什么在通过 Firebase 中的 Express 应用程序从 Google Cloud Storage 提供 PDF 时下载在 Chrome 中挂起？

如何解决为什么在通过 Firebase 中的 Express 应用程序从 Google Cloud Storage 提供 PDF 时下载在 Chrome 中挂起？

我创建了一个 express 应用程序来向客户端提供存储在 Google 云存储中的 PDF 文件

当点击文件的端点时，下载在 Chrome 中间歇性地挂起，下载的 KB 数是随机的，通常在 1000 KB 到 1300 KB 的范围内。但是我通常可以在 Firefox、Safari 和 Postman 中成功下载文件。

我还注意到，如果我省略了强制浏览器尝试呈现 PDF 的“Content-disposition”标头，浏览器会开始在 Chrome 中呈现它，但会以某个随机加载百分比挂起。在 Firefox/Safari 中，它会在第一次加载时以随机百分比挂起，但通常会在立即刷新 URL 时呈现。

我不确定我是否错误地使用了流/缓冲区，或者我是否错误地返回了从 Google Storage 收到的缓冲区。我已经在谷歌上搜索了几个小时，但我的想法已经用完了，如果有人提供任何帮助，我将不胜感激。

是否有更好的方式来提供文件，或者我是否需要以不同于谷歌云存储的方式下载文件？

感谢您看到这里！

// FileService for fetching from Google Storage
export class FilesService {

    pdfBucket: Bucket

    constructor() {
        this.pdfBucket = admin.storage().bucket(config.firebase_ppe_product_pdfs_bucket)
    }

    getPdfFile(filePath: string) : File {
        return this.pdfBucket.file(filePath);
    }

    async getBufferOfPdfFile(filePath: string) {
        const file = await this.getPdfFile(filePath)

        // Download the file to a buffer
        // Omit the "destination" option from download method to receive a buffer
        const [ buffer ] = await file.download()

        return buffer
    }
}

/* index.ts - main express server */ 

import * as functions from "firebase-functions";
import logger from "morgan";
import cookieParser from "cookie-parser";
import express from "express";
import cors from "cors";

import files from './routers/files'

const app = express();

app.use(cors());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use('/files',files);

export const server = functions.https.onRequest(app)

/* files.ts - files router for express server */ 

import express,{Express} from "express";
import {FilesService} from "../../services/files";
import logger from "../../services/rollbar";

const router = express.Router();

const filesService = new FilesService()

/* GET pdf */
router.get('/product/:slug',async (req,res) => {
    const slug = req.params.slug

    try {
        // Get the file buffer
        const data = await filesService.getBufferOfPdfFile(slug)

        res.writeHead(200,{
            'Content-Type': 'application/pdf','Content-disposition': `attachment; filename=${slug}`,'Content-Length': data.length
        })
        res.end(data,'binary')
    } catch (err) {
        res.status(500).send("Looks like there was a problem...")
        logger.error(err)
    }
});

export default router;

解决方法

终于想通了...似乎我应该直接使用流并将其通过管道传输到 Express 响应中。

这为我修好了

// in the files.ts express handler
// ...

// Get the file stream
const file = await filesService.getPdfFile(`${hostname}/${slug}`)
const stream = file.createReadStream()

res.on('error',err => logger.error(err))
res.set('Content-Type','application/pdf')

if (download) {
    res.set('Content-Disposition',`attachment; filename=${slug}`)
}

// Pipe file read stream to the response (write stream)
stream.pipe(res)
stream.on('error',err => logger.error(err))

// ...