grist static
1.0.0
이는 특별한 백엔드 지원 없이 일반 웹사이트에서 .grist 파일(Grist 스프레드시트)을 보고 상호 작용할 수 있는 방법입니다. 여기서의 아이디어는 PDF를 작성하는 것처럼 웹사이트에 스프레드시트를 멋진 서식과 탐색 옵션을 포함하고 별다른 소란 없이 넣을 수 있다면 보고서 작성에 유용할 것이라는 것입니다.
특별한 백엔드를 실행할 수 있다면 Grist-core는 Grist 스프레드시트를 호스팅하는 가장 검증된 방법입니다. 그리고 외부 Grist 설치(예: Grist Labs에서 제공하는 호스팅 서비스)에서 Grist 스프레드시트를 포함하는 경우 Grist 포함이 여러 목적에 적합할 수 있습니다. 그러나 외부에서 데이터를 호스팅할 수 없고 자체 Grist 설치에 따른 운영 부담을 원하지 않는 경우, grist-static 하면 일반 웹 사이트에서 Grist 스프레드시트를 쉽게 렌더링할 수 있습니다. PDF와 마찬가지로 사람들은 스프레드시트를 보고, 탐색하고, 검색할 수 있습니다. PDF보다 더 나은 점은 선택 사항을 변경할 수 있고 숫자를 변경하여 실험하여 어떤 일이 일어나는지 확인할 수 있다는 것입니다. 모든 뷰어는 자신만의 사본을 갖고 있으며 변경 사항은 다른 사람이 보거나 저장되지 않습니다. 이는 또한 수백만 명의 동시 사용자에게 Grist 문서를 보여줄 수 있는 확장 가능한 방법이기도 합니다.
https://gristlabs.github.io/grist-static은 GitHub 페이지에 호스팅된 몇 가지 Grist 문서 예시를 보여줍니다.
요즘에는 PDF를 웹사이트에 올릴 수 있고 브라우저에서 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 >.html 파일 옆에 .grist 파일을 넣고 bootstrapGrist 에 대한 옵션을 입력하면 됩니다.initialData: 'path/to/data.csv' 전달하여 CSV 파일을 새 테이블로 가져올 수도 있습니다. 이 경우 initialFile 선택 사항입니다.initialContent 옵션도 있습니다. 이를 사용하여 CSV 파일의 내용을 전달할 수 있습니다.elementId: 'element-id 전달하여 페이지의 요소 내에서 Grist를 열 수도 있습니다.singlePage: true 설정할 수 있습니다. Grist는 CSV를 포함한 다양한 형식의 데이터를 처리할 수 있습니다. CSV는 매우 일반적인 형식이고 온라인에서 상호 작용하는 것이 여전히 귀찮은 일이기 때문에 우리는 CSV에서 직접 보기, 정렬, 필터링, 복사/붙여넣기를 위해 특별히 간소화된 csv-viewer.js 유틸리티에 grist-static 패키지했습니다. 웹페이지.
웹페이지의 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 라는 웹 구성 요소로도 사용할 수 있습니다.
< 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 설정하면 (유틸리티 이름에도 불구하고) CSV가 아닌 Grist 문서를 열 수 있습니다.data-single-page true 로 설정하고 다중 페이지 레이아웃의 경우 false 설정합니다.data-name 사용하십시오.data-loader 사용하세요. 이는 기본적으로 활성화되어 있으며, 비활성화하려면 data-loader="false" 전달하세요. Grist의 기본 스타일을 제공하는 사전 정의된 버튼 클래스, 특히 grist 및 grist-large 도 있습니다.
더 미세한 제어를 위해 bootstrapGrist 와 동일한 API를 사용하는 전역 previewInGrist 함수가 있지만 인라인으로 렌더링하는 대신 팝업으로 미리보기를 엽니다. 이는 페이지 로드 시 사용할 수 없는 동적으로 생성된 콘텐츠나 파일에 유용할 수 있습니다.
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 예제에서는 정적 파일만 제공하는 Grist Labs에서 운영하는 도메인인 https://grist-static.com/ 사용했습니다. 이 도메인은 사용량을 측정하기 위해 트래픽을 기록하지만 쿠키를 설정하거나 추적하지는 않습니다. 필요한 모든 파일을 자신의 웹사이트나 CDN에 복사하여 트래픽을 완전히 비공개로 유지할 수 있습니다.
다음 방법으로 필요한 파일을 얻을 수 있습니다.
npm pack grist-static 실행하여 NPM 레지스트리에서 최신 tarball을 가져옵니다. Tarball( .tgz 파일)은 압축을 풀 때 사용할 수 있는 다양한 무료 도구가 포함된 일반적인 아카이브 형식입니다. 그러나 거기에 도달하면 결국에는 csv-viewer.js , latest.js 및 Grist를 구성하는 다른 많은 파일이 포함된 dist/ 디렉토리를 갖게 됩니다. 해당 자료를 원하는 곳에 배치하고 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 > 물론 이 특정 변경 사항은 단순히 grist-static.com 이 아닌 jsdelivr.net 으로 사용 정보를 이동하는 것이지만, 여러분도 이해하실 것입니다. 파일을 배치하기로 선택한 위치에 동일한 패턴을 사용하세요.
브라우저에서 사용자 변경 사항이 유지되도록 하는 것이 깔끔할 수 있습니다. OPFS는 광범위한 브라우저 지원을 제공하기 때문에 이를 위한 좋은 옵션이 될 수 있습니다. 기타 단계:
grist-core 의 업스트림에 있는 빌드 단계를 활성화하려면 몇 가지 작은 조정을 수행하세요. 
