grist static
1.0.0
นี่คือวิธีการดูและโต้ตอบกับไฟล์ .grist (สเปรดชีต Grist) บนเว็บไซต์ทั่วไป โดยไม่จำเป็นต้องให้การสนับสนุนแบ็คเอนด์เป็นพิเศษ แนวคิดนี้คือ คงจะดีสำหรับการทำรายงานถ้าเราสามารถใส่สเปรดชีตบนเว็บไซต์เหมือนกับที่เราทำ PDFs โดยมีรูปแบบและตัวเลือกการนำทางที่ดีและไม่ยุ่งยากมากนัก
หากคุณ สามารถ เรียกใช้แบ็คเอนด์แบบพิเศษได้ Grist-Core คือวิธีโฮสต์สเปรดชีต Grist ที่ผ่านการทดสอบการต่อสู้แล้ว และสำหรับวัตถุประสงค์หลายประการ การฝัง Grist อาจเพียงพอ โดยที่คุณฝังสเปรดชีต Grist จากการติดตั้ง Grist ภายนอก (เช่น บริการโฮสต์ที่นำเสนอโดย Grist Labs) แต่ถ้าคุณไม่สามารถโฮสต์ข้อมูลของคุณภายนอกได้ และไม่ต้องการให้มีภาระในการดำเนินงานในการติดตั้ง Grist ของคุณเอง grist-static จะทำให้คุณสามารถแสดงสเปรดชีต Grist บนเว็บไซต์ทั่วไปได้อย่างง่ายดาย เช่นเดียวกับ PDF ผู้คนจะสามารถดูสเปรดชีต นำทางไปรอบๆ และค้นหาภายในสเปรดชีตได้ ดีกว่า PDF พวกเขาจะสามารถเปลี่ยนการเลือก และทดลองเปลี่ยนตัวเลขเพื่อดูว่าเกิดอะไรขึ้น ผู้ดูทุกคนมีสำเนาของตัวเอง และผู้อื่นจะไม่เห็นหรือจัดเก็บการเปลี่ยนแปลงของพวกเขา นี่จะเป็นวิธีที่ปรับขนาดได้ในการแสดงเอกสาร Grist แก่ผู้ใช้หลายล้านคนพร้อมกัน
https://gristlabs.github.io/grist-static แสดงตัวอย่างเอกสาร Grist สองสามตัวอย่างที่โฮสต์บนหน้า GitHub:
ทุกวันนี้ คุณสามารถวาง 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 นี้ และจัดเก็บตัวเลือกใน bootstrapGristinitialData: 'path/to/data.csv' เพื่อนำเข้าไฟล์ CSV ลงในตารางใหม่ได้ ในกรณีนี้ initialFile เป็นทางเลือกinitialContent คุณสามารถใช้มันเพื่อส่งเนื้อหาของไฟล์ CSVelementId: '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 >จากนั้นคุณสามารถสร้างปุ่มเพื่อเปิด CSV จาก URL ได้:
< button data-grist-csv-open =" transactions.csv " > View CSV </ button >CSV อาจเป็นไฟล์หรือ URL ของข้อมูล CSV ที่เว็บไซต์ของคุณสร้างขึ้นสำหรับผู้ใช้แบบไดนามิก
หากคุณกำลังทำงานกับลิงก์แทนที่จะเป็นปุ่ม วิธีการเดียวกันนี้ก็ใช้ได้ผล:
< a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >แน่นอนคุณสามารถจัดรูปแบบปุ่มและลิงก์ได้ตามที่คุณต้องการ
CSV Viewer ยังสามารถใช้เป็นองค์ประกอบเว็บที่เรียกว่า csv-viewer :
< 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 สำหรับเค้าโครงหน้าเดียว หรือ 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 ซึ่งให้บริการเฉพาะไฟล์แบบคงที่เท่านั้น โดเมนนี้บันทึกการรับส่งข้อมูลเพื่อวัดการใช้งาน แต่ไม่ได้ตั้งค่าหรือติดตามคุกกี้ คุณสามารถคัดลอกไฟล์ที่จำเป็นทั้งหมดไปยังเว็บไซต์หรือ CDN ของคุณเองเพื่อให้การรับส่งข้อมูลของคุณเป็นส่วนตัวโดยสมบูรณ์
คุณสามารถรับไฟล์ที่ต้องการได้โดย:
npm pack grist-static เพื่อดึง tarball ล่าสุดจากรีจิสทรี NPM Tarballs (ไฟล์ .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 
