有提到師大的網域有同源限制
不過後來爬文發現,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.