2023年9月30日 星期六

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的檔案來源

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

2023年9月4日 星期一

JS / 以Google sheets作為資料庫，透過Google Apps Script製作查詢頁面 修改 版3

除了嵌到網站之中，或者執行發佈的網頁程式之外 也可以在SpreadsheetApp自訂功能選單 只是這個功能必須綁定自身文件 
Google 應用程式的使用者介面環境範例，可讓指令碼新增選單、對話方塊和側欄等功能。指令碼只能在開啟編輯器的目前執行個體中與 UI 互動，且指令碼必須在編輯器容器繫結範圍內。
程式碼基本沿用 JS / 以Google sheets作為資料庫，透過Google Apps Script製作查詢頁面 修改版2 增加了以下程式碼 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('查詢表單資料')
      .addItem('啟動表單', 'showDialog')
      .addItem('啟動側欄', 'showSidebar')
      .addToUi();
}

function showDialog() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  html.setWidth(880);
  html.setHeight(500);

  SpreadsheetApp.getUi().showModalDialog(html, '查詢表單');  
}

function showSidebar() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
 
  SpreadsheetApp.getUi().showSidebar(html);
}
 

function onOpen() {}是內建函數

當開啟文件時會執行的程序 這裡是透過getUi()建立使用者介面環境(UI) 增加兩個項目

一個是強制回應對話方塊 (不能點選其他內容) 

function showDialog() {} 對話方塊可以設定寬高與標題

另一個是側欄

function showSidebar() {} 側欄的寬度是固定值(300)
備註： var html = HtmlService.createTemplateFromFile("index").evaluate() var html = HtmlService.createHtmlOutputFromFile("index"); 兩者的差別 Template可以使用Scriptlet，這樣原本在index.Html的程式碼<?!= include("style.css"); ?> 可以正常運作 HtmlOutput無法使用Scriptlet，原本的程式就要大幅修改了，或者直接將要引用的內容置入index.Html裡

2023年9月2日 星期六

Canva / 將Canva建置的網頁嵌入網站

Canva真是行政工作的好夥伴 
可以設計海報也可以建置簡易的網站 
建置出來的網站可以發佈成有一個自訂名稱的網域 https://xxxxxxxxxxxxx.my.canva.site 
之後新建的網站則是隸屬於這個網址下的子網頁 https://xxxxxxxxxxxxx.my.canva.site/zzzzzzzzz 
免費帳號可以有5個網站空間 (只是不知道一個網站內可以有多少個分頁) 
此外，也可以將網頁內容嵌入之其他網站之中 
例如：google協作平台、wordpress網站