JS / 使用PDF.js建立網頁PDF瀏覽器 番外 firebase

JS / 使用PDF.js建立網頁PDF瀏覽器

有提到師大的網域有同源限制

不過後來爬文發現,PDF.js本身也有同源限制(但是可以修改)

由於師大的空間有限

所以嘗試使用 google firebase的Storage

大致的流程如下

1.建立 google firebase專案

在Storage上傳檔案、修改讀寫規則(可以讀取、但禁止寫入)

不過要透過程式讀取檔案,需要建立應用程式

2.建立應用程式,取得firebaseConfig資料

由於讀寫規則已經限制只能讀取

所以目前是可以公開firebaseConfig進行DEMO

3.前端網頁引用firebase的irebase-app.js 跟 firebase-storage.js

備註:單純引用為前端網頁程式的版本是8.4.2,更新的版本就只能用node.js方式來使用

前三個流程可以參考這個網頁的說明 Firebase Storage 入門

4.JS程式,主要是修改PDF.js的範例

將從firebase取得的資料作為PDF.js的檔案來源

這裡面對我來說有很多的知識點,都寫在程式碼備註了

See the Pen base64 encoded PDF-Cloud Storage 4 by 莊幸諺 (@trico109748007) on CodePen.