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

Question

I have created an express app to serve PDF files stored in Google cloud storage to the client

When hitting the endpoint for a file, the download hangs intermittently in Chrome at a random number of KB downloaded, usually somewhere in the range of 1000KB to 1300 KB. But I can usually successfully download the file in Firefox, Safari, and Postman.

I also noticed that if I omit the 'Content-Disposition' header which forces the browser to try and render the PDF, the browser begins to render it in Chrome but hangs at some random percentage of loading. In Firefox/Safari, it will hang at a random percent the first time loading, but usually will render upon an immediate refresh of the URL.

I'm not sure if I'm using streams/buffers incorrectly or if I'm returning the buffer received from Google Storage incorrectly. I've been googling this for hours now and am running out of ideas and would appreciate any help anyone has.

Is there a better way to serve the file or do I need to download the file differently from google cloud storage?

Thank you for looking at this!

// 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;

Answer 1

Finally figured this out... seems I should have been using the streams directly and piping it into the Express response.

This fixed it for me

// 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))

// ...