angular - Hvordan vise en Firebase Storage-fil (Docx) i html?


Jeg prøver å vise en fil (.docx) fra min Firebase Storage i HTML med:

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

eller

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

Men ingenting fungerer... Noen som har en idé om hvorfor det ikke fungerer eller en annen løsning for å vise en .docx-fil fra Firebase Storage?

P.s. Bare filene mine på Firebase Storage fungerer ikke, andre filer fungerer (http://writing.engr.psu.edu/workbooks/formal_report_template.doc&embedded=true) men serverregelen min er "allow read" så jeg forstår ikke hvorfor det ikke fungerer...

Svar #1

Ok, jeg fant en løsning, problemet var bare URL-en, så jeg endret URL-en til en kort URL med Bitly

Jeg laget en enkel Firebase-cloud-funksjon for dette:

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);
    });