How to show a Firebase Storage File (Docx) in html?

Question

I try to show a file(.docx) from my Firebase Storage in Html with:

<iframe src="https://docs.google.com/gview?url=<Storage-Link>"></iframe>

or

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=<Storage-Link>' width='1366px' height='623px' frameborder='0'></iframe>

But nothing works... Someone an idea why it doesn't work or an another solution how to show a .docx file from Firebase Storage?

P.s. Only my Firebase Storage Files not working, another files working (http://writing.engr.psu.edu/workbooks/formal_report_template.doc&embedded=true) but my server rule is "allow read" so i dont understand why its not working...

Answer 1

Okay, I found a solution, the problem was only the URL, so I changed the URL into a short URL with Bitly

I created a simple Firebase-Cloud-Fuction for this:

import { initializeApp } from 'firebase-admin/app';
import { error, info, warn } from 'firebase-functions/logger';
import { BitlyClient } from 'bitly';

initializeApp();
const bitly = new BitlyClient('<Your-GA-Token>');

export const YourFunctionName = runWith({
    timeoutSeconds: 30,
    memory: '256MB',
    minInstances: 0,
    failurePolicy: true,
}).region('Your-region')
    .firestore
    .document('Your-Doc-Path')
    .onWrite(async (snapshot, context) => {
        if (!snapshot.after.exists) return;

        const eventAgeMs = Date.now() - Date.parse(context.timestamp);
        const eventMaxAgeMs = 30_000; // Set the maximum function runtime for retries 
        if (eventAgeMs > eventMaxAgeMs) return warn('The shortening of the URL failed due to a function timeout.');

        const originalUrl = snapshot.after.data()?.url;
        if (!originalUrl) return info('The URL does not exist for shortening.')

        return bitly.shorten(originalUrl).then((result) => {
            if (!result.url) return error(`Failed to shortening the URL “${originalUrl}”`);

            return snapshot.after.ref.update({
                shortUrl: result.url,
            }).then(() => {
                info(`Successful shorten url “${originalUrl}” to “${result.url}”`);
            }).catch(error);
        }).catch(error);
    });