grist static
1.0.0
這是一種在常規網站上查看.grist檔案（Grist 電子表格）並與之互動的方法，無需特殊的後端支援。這裡的想法是，如果我們可以像處理 PDF 一樣將電子表格放在網站上，並且具有良好的格式和導航選項，並且沒有太多麻煩，那麼對於製作報告來說將會很棒。
如果您可以運行特殊的後端，grist-core 是託管 Grist 電子表格的最經過考驗的方式。對於許多用途，Grist 嵌入可能就足夠了，您可以從外部 Grist 安裝（例如 Grist Labs 提供的託管服務）嵌入 Grist 電子表格。但是，如果您無法在外部託管數據，並且不希望承擔自己安裝 Grist 的操作負擔， grist-static可以為您提供一種在常規網站上輕鬆呈現 Grist 電子表格的方法。與 PDF 一樣，人們將能夠查看電子表格、在其中導航並在其中進行搜尋。比 PDF 更好的是，他們將能夠更改選擇，並嘗試更改數字以查看會發生什麼。每個查看者都有自己的副本，其他人不會看到或儲存他們的變更。這也是向數百萬並髮用戶展示 Grist 文件的可擴展方式。
https://gristlabs.github.io/grist-static 顯示了幾個在 GitHub Pages 上託管的範例 Grist 文件：
如今，PDF 可以放置在網站上，您可以連結到它們，並期望瀏覽器能夠很好地顯示它們。瀏覽器還沒有對 Grist 的原生支援 [還:-)]，但你可以製作一個像這樣的小包裝頁面：
<!doctype html >
< html >
< head >
< meta charset =" utf8 " >
< script src =" https://grist-static.com/latest.js " > </ script >
</ head >
< body >
< script >
bootstrapGrist ( {
initialFile : 'investment-research.grist' ,
name : 'Investment Research' ,
} ) ;
</ script >
</ body >
</ html >.grist檔案放在伺服器上的該.html檔案旁邊，然後將選項歸檔到bootstrapGrist即可。initialData: 'path/to/data.csv'將CSV 檔案匯入到新表中。在這種情況下， initialFile是可選的。initialContent選項。您可以使用它來傳遞 CSV 檔案的內容。elementId: 'element-id在頁面的元素中開啟 Grist。singlePage: true以獲得不太繁忙的單頁面佈局。 Grist 可以處理多種格式的數據，包括 CSV。由於 CSV 是一種常見的格式，並且與它在線交互仍然是一件苦差事，因此我們將grist-static打包到簡化的csv-viewer.js實用程式中，專門用於直接在CSV 中查看、排序、過濾、任何複製/貼上一個網頁。
只需將檢視器新增至網頁的head區域即可：
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >然後您可以建立一個按鈕來從 URL 開啟 CSV：
< button data-grist-csv-open =" transactions.csv " > View CSV </ button >CSV 可以是一個文件，也可以是您的網站為使用者動態產生的 CSV 資料的 URL。
如果您使用連結而不是按鈕，則可以使用相同的方法：
< a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >當然，您可以根據需要設定按鈕和連結的樣式。
CSV 檢視器也可以用作名為csv-viewer的 Web 元件：
< html >
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >
< body >
< csv-viewer initial-data =" path/to/data.csv " style =" height: 500px; border: 1px solid green " >
</ csv-viewer >
</ body >
</ html >事實上，該元件接受與bootstrapGrist函數相同的選項集，因此您可以將其配置為顯示 CSV 檔案或（儘管其名稱）您選擇的 Grist 文件。可用選項的完整清單：
initial-file ：要載入的初始 Grist 文件。initial-data ：要匯入的 CSV 檔案。initial-content ：要匯入的 CSV 檔案的內容。name ：要使用的 Grist 文件的名稱。single-page ：一個布林屬性，如果存在，則以不太繁忙的單頁面佈局顯示文件。loader ：一個布林屬性，如果存在，則會在載入文件時顯示載入微調器。 我們已經看到，使用csv-viewer.js ，任何元素都可以轉換為打開帶有 CSV 檔案的彈出視窗的連結。您需要做的就是向其添加data-grist-csv-open屬性。
還有其他可用選項。
data-grist-doc-open允許開啟 Grist 文件而不是 CSV（儘管實用程式的名稱如此）。data-single-page設為true ；對於多頁面佈局，將 data-sing-page 設為false 。data-name覆寫多頁面版面配置中顯示的預設文件名稱。data-loader在文件載入時顯示載入旋轉器。預設啟用此功能，傳遞data-loader="false"將其停用。還有一些預先定義的按鈕類，特別是grist和grist-large ，它們提供了 Grist 的預設樣式。
為了更好地控制，有一個全域的previewInGrist函數，其 API 與bootstrapGrist相同，但不是內聯渲染，而是在彈出視窗中開啟預覽。這對於頁面加載時不可用的任何動態創建的內容或文件可能很有用。
預設情況下，Grist 電子表格在.grist檔案中儲存大量歷史記錄。您可以透過建立grist-core來修剪該歷史記錄，然後在grist-core目錄中執行以下操作：
yarn run cli history prune PATH/TO/YOUR/doc.grist
抱歉，這很尷尬。
git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/
上面的序列在page目錄中放置了很多鏈接，以方便開發時使用。若要收集要上傳的文件，請改用：
make package
# everything you need is in dist/
到目前為止，所有 HTML 範例都使用了https://grist-static.com/ ，這是 Grist Labs 營運的網域，僅提供靜態檔案。該網域記錄流量以測量使用情況，但不設定或追蹤 cookie。您可以將所有需要的文件複製到您自己的網站或 CDN，以保持您的流量完全私密。
您可以透過以下方式取得所需文件：
npm pack grist-static從 NPM 註冊表獲取最新的 tarball。 Tarball（ .tgz檔案）是一種常見的存檔格式，有許多免費工具可用於解壓縮它們。不管你到達那裡，最終你都會有一個dist/目錄，其中包含csv-viewer.js 、 latest.js和許多其他組成 Grist 的檔案。將該資料放置在您希望的位置，並適當更新您的 URL。
jsdelivr CDN 自動鏡像放置在 NPM 上的包，所以我們以它為例。我們可以替換：
< script src =" https://grist-static.com/csv-viewer.js " > </ script >和：
< script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script >當然，這個特殊的改變只是將使用資訊移動到jsdelivr.net而不是grist-static.com ，但你明白了。只需在您選擇放置檔案的任何位置使用相同的模式即可。
讓用戶更改保留在瀏覽器中可能會很方便 - 一旦 OPFS 擁有廣泛的瀏覽器支持，它可能是一個不錯的選擇。其他步驟：
grist-core的上游建置步驟。 
