如何在 html 中显示 Firebase 存储文件 (Docx)？答案

【问题标题】：How to show a Firebase Storage File (Docx) in html?如何在 html 中显示 Firebase 存储文件 (Docx)？
【发布时间】：2019-08-29 23:10:25
【问题描述】：

我尝试在 Html 中显示我的 Firebase 存储中的文件（.docx）：

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

或

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

但是没有任何效果... 有人知道为什么它不起作用或另一种解决方案如何显示 Firebase Storage 中的 .docx 文件？

附：只有我的 Firebase 存储文件不工作，另一个文件工作（http://writing.engr.psu.edu/workbooks/formal_report_template.doc&embedded=true）但我的服务器规则是“允许读取”所以我不明白为什么它不工作......

【问题讨论】：

标签： html angular typescript firebase-storage

【解决方案1】：

好的，我找到了解决方案，问题只是网址，所以我将其更改为带有 Bitly 的短网址

我为此创建了一个简单的 Firebase 函数：

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import { BitlyClient } from 'bitly';

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

export const YourFunctionName = functions.firestore.document('Your-Doc-Path')
.onWrite((snapshot, context) => {
    const originalUrl = snapshot.after.data();
    bitly.shorten(originalUrl).then(function (result) {
        return admin.firestore().collection('Your-Collection').doc('Your-Doc').update(result.url).then(() => {
            console.log('Short Url: ' + result.url);
        });
    }).catch(function (error) {
        console.error(error);
    });
});

【讨论】：