Office와 함께 웹 앱에 사무실 기능을 추가하십시오

이 기사는 Offorfice와 파트너십을 통해 만들어졌습니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.

우리가 앱에 복잡한 기능을 추가하려고 할 때마다 "내 자신을 굴려야합니까?" 그리고 당신의 목표가 그 기능을 구축하는 것이 아니라면, 대답은 거의 항상“아니오”입니다. 필요한 것은 가능한 한 빨리 MVP에 도달하는 데 도움이되는 것이며,이를 달성하는 가장 좋은 방법은 시간을 절약 할 수있는 완전한 상자 밖의 솔루션을 사용하는 것입니다. 회전, 개발 비용을 절약 할 수 있습니다 위의 것이 당신과 공명하기 때문에 당신이 여전히 여기에 있다고 가정 할 것입니다. 이제 우리가 동기화 되었으므로이 기사에서 보여 드리고 싶은 것은 웹 앱에 전용 오피스를 통합하는 것이 얼마나 쉬운 지입니다.

. 키 테이크 아웃 Office는 Microsoft Office 및 OpenDocument 형식과 호환되는 포괄적 인 사무실 제품군을 제공하며, 이는 문서, 스프레드 시트 및 프리젠 테이션 관리를 위해 웹 애플리케이션에 직접 통합 할 수 있습니다. Office Office의 Developer Edition은 앱에 광범위한 사용자 정의 및 통합을 허용하여 편집기를 자신의 것으로 브랜딩하기위한 "화이트 레이블"옵션을 제공합니다. 전용 오피스 설정은 로컬로 유일한 Office Docs (Document Server)를 설치하고 여러 프로그래밍 언어를 지원하여 앱 내에서 문서를 관리하기위한 API 요청을 구현해야합니다. Office Integration은 웹 앱 내에서 직접 문서의 생성, 편집, 삭제 및 추적을 가능하게하여 외부 애플리케이션없이 사용자 상호 작용 및 생산성을 향상시킬 수 있습니다. 실시간 공동 작업은 전용으로 전용으로 지원되므로 여러 사용자가 문서를 동시에 편집하고 서로의 변경 사항을 실시간 볼 수 있습니다. 통합 프로세스는 개발자가 최소한의 실행 가능한 제품 (MVP)을 신속하고 비용 효율적으로 달성 할 수 있도록 간단하게 설계되었으며, 지원을 위해 충분한 문서와 커뮤니티 지원을 제공합니다. 전용 란 무엇입니까? <: :> 웹 사이트에서 :

Office는 Microsoft Office 및 OpenDocument 파일 형식과 호환되는 가장 기능이 풍부한 사무실 제품군을 제공합니다. 웹 애플리케이션에서 직접 문서, 스프레드 시트 및 프레젠테이션을보고, 편집 및 공동으로 작업하십시오.

사무실 제품군에는 여러 판이 있습니다. 이 기사에서는 개발자 에디션을 사용할 것입니다. 왜냐하면 편집기를 앱에 통합하여 나중에 클라우드 서비스 또는 온 프레미스 설치로 많은 사용자에게 전달 될 예정입니다.

. 기존 동기화 및 공유 솔루션 내에서 전용 사내를 사용하려면 Enterprise Edition을 확인해야합니다. 통합 목록은 여기에 있습니다.

Developer Edition 개발자 에디션은 앱 내에 편집자를 통합 할 수있는 충분한 자유를 제공 할뿐만 아니라 편집자를 자신의 브랜드에서 사용할 수 있도록 편집기를 완전히 사용자 정의 할 수있는 "화이트 레이블"옵션도 제공됩니다. 문서 서버 통합

웹 앱과 통합하려면 먼저 유일한 오피스 문서 (문서 서버로 패키지)를 다운로드하여 로컬 서버에서 설정해야합니다. 설치 후 서버에서 문서를 처리하라는 요청을 구현할 수 있습니다. Only Office는 .NET, Java, Node.js, PHP, Python 및 Ruby에 대한 아주 좋은 예제를 제공합니다. 문서 서버와 선호하는 예제를 다운로드하여 컴퓨터에서 바로 시도 할 수 있습니다. 앱에 통합하기 시작하는 방법을 보여 드리겠습니다. 이를 위해 Node.js 및 Express와 함께 매우 간단한 예제를 사용합니다. 나는 구현에 대해 자세히 설명하지 않을 것이며, Bare Bone Essentials를 배치하고 강력하고 확장 가능한 시스템을 구축하기 위해 빈칸을 채울 수 있습니다.

. 나는 다음 구조의 앱이 있습니다 :

공개/문서 폴더를 사용하여 문서를 저장합니다. App.js 파일은 Express App Code가있는 곳이며 Index.html은 문서를 표시 할 위치입니다. 테스트 목적으로 문서 폴더에 샘플을 삭제했습니다. 공개/ 샘플 내부의 트리 파일은 새 파일을 "작성"할 때 복사 할 빈 파일입니다. 나중에 볼 수 있듯이 백업 폴더는 이전 버전의 백업을 유지하는 데 도움이 될뿐만 아니라 문서를 수정 한 후 문서의 고유 식별자를 생성하는 데 도움이됩니다. public/css/main.css 및 public/javaScript/main.js 파일은 index.html에서 사용됩니다. 나중에 살펴 보겠습니다.

app.js 파일을 살펴 보겠습니다

우리가하는 일은 파일을 LocalHost : 3000/documents/filename으로 제공하는 것입니다.

나는 또한 나 자신보다 앞서 나와 동기화, fs 및 bodyparser를 추가했습니다. 이것들은 지금 관련이 없지만 나중에 사용할 것입니다.

페치 문서 사용 가능한 문서를 표시하려면 모든 파일 이름 목록을 가져 와서 클라이언트로 보내야합니다. 다음을위한 /문서 경로를 만들 것입니다

문서 생성 처음에는 샘플 문서가 있지만 전혀 재미가 없습니다. 일부 파일 추가를 지원하기 위해 A /Create Route를 추가하겠습니다. 우리는 단순히 파일 이름을 가져 와서 해당 템플릿을 새로운 이름으로 공개/문서 폴더에 복사합니다.

삭제 문서 우리는 또한 문서를 삭제하는 방법이 필요합니다. /삭제 경로를 만들어 봅시다 :

이것은 매우 간단합니다. 파일을 삭제하고 200 상태 코드를 보내서 사용자에게 모든 것을 잘 알 수 있습니다. 그렇지 않으면 400 상태 코드가 나타납니다.

문서를 저장 지금까지 편집을 위해 문서를 열 수 있지만 변경 사항을 저장할 방법은 없습니다. 지금 그렇게합시다. 파일을 저장하기 위해 /트랙 경로를 추가합니다 이것은 편집기가 파일을 저장할 때 문서 서버에서 사용하기 때문에 까다로운 것입니다. 보시다시피, 우리는 "{"error ": 0}"를 반환하고 있습니다. 이것은 서버에게 모든 것이 좋습니다.

편집기가 닫히면 파일의 현재 버전은 공개/백업/파일 이름-역사로 백업됩니다. 현재 시간은 파일 이름으로 밀리 초입니다. 보시다시피 파일의 이름을 뒷부분에서 나중에 사용합니다.

이 예에서는 새 백업을 저장할 때마다 이전 백업을 교체합니다. 더 많은 백업을 어떻게 유지 하시겠습니까?

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

백업 가져 오기 특정 파일에 대한 백업을 얻는 방법이 필요하므로 다음을 처리하기 위해 A /백업 경로를 추가합니다.

여기서는 해당 파일의 백업 폴더가 존재하고 해당 폴더의 모든 백업 파일 배열을 반환합니다. 예, 이것은 단일 파일에 대한 더 많은 백업을 유지하는 작업에 도움이됩니다. 나는 당신을 위해 모든 일을 계속할 수 없습니다!

브라우저에서 문서 열기 우리는 Office Docs를 사용하여 브라우저에서 직접 편집하기 위해 문서를 열 수있는 방법을 살펴볼 것입니다.

먼저 간단한 HTML 파일을 만듭니다 :

보시다시피,이 파일에는별로 많지 않습니다. 우리는 편집자가 첨부 될 자리 표시 자 Div가 있습니다. 그런 다음 문서 DIV가 있습니다. 여기에는 문서를 작성하기위한 컨트롤과 파일 이름 목록에 대한 컨테이너가 포함되어 있습니다. 아래에는 문서 서버에 대한 JavaScript API가있는 스크립트가 있습니다. 호스트를 문서 서버의 위치로 바꿔야 할 수도 있습니다. 내가 준 Docker 명령으로 설치 한 경우, 당신은 가기에 좋을 것입니다.

마지막으로, 프론트 엔드 JavaScript를 가져 오는 스크립트 태그와 Main.js 파일이 있습니다. 여기서 Docsapi 객체에 전 세계적으로 액세스 할 수 있습니다. css 코딩에 도달하기 전에 일부 CSS로 레이아웃을 마무리하여 앱을보다 유용하고 덜 추악하게 만듭니다. main.css에 다음을 추가하십시오 :

사용 가능한 문서 표시 그 길을 벗어나면서 우리는 프론트 엔드 코딩을 시작할 준비가되었습니다. 문서 폴더에 파일을 나열하는 것으로 시작합니다. Main.js로 이동하여 다음 코드를 추가하십시오 여기에서 맨 위에있는 쿼리 매개 변수를 가져와 파일을 열고 있는지 확인합니다. 우리가 있다면, 우리는 editDocument 함수를 호출합니다. 걱정하지 마세요. 나중에 만들 것입니다.

파일을 열지 않으면 사용 가능한 파일 목록과 컨트롤이 더 많이 생성하려고합니다. ListDocuments에서 먼저 자리 표시자를 숨기고 목록을 정리하여 새로 만들 수 있도록 목록을 정리해야합니다. 그런 다음 이전에 만든 /문서 경로를 호출하여 모든 파일을 가져오고 반복하고 해당 요소를 만듭니다. 파일 이름으로 각 요소를 ID로 식별합니다. 이런 식으로 우리는 나중에 쉽게 검색 할 수 있습니다.

우리는 addDocumenthtml 함수를 호출하고 있으며 나중에 새 파일을 추가하기 위해 재사용 할 것입니다.

각 문서에 대해, 우리는 또한 맨 아래에 정의한 OpenDocument를 호출하고 있으며, 크로스 기호에서는 deletedocument를 호출합니다. 다음에 정의 할 것입니다.

. 문서 삭제 문서를 삭제하려면 사용자가 계속 진행하기 전에 확실히 확인하고 /삭제 경로를 호출하고 해당 파일의 핵으로 이동하는 경우 사용자에게 프롬프트를드립니다. API에 대한 또 다른 호출을 낭비하는 대신, 우리는 반환 된 상태가 200이면 DOM 요소를 직접 삭제하는지 확인합니다.

문서 생성 문서 작성 컨트롤을 클릭 할 때 우리가 호출했던 기능을 기억하십니까? 여기 당신은 간다 :

매우 간단합니다. 우리는 이름을 메시지로 표시하고 파일 이름 매개 변수로 /생성 경로를 호출하고 상태가 200으로 돌아 오면 addDocumentHtml을 호출하여 DOM 요소를 직접 추가합니다.

. Office Docs

에서 문서 열기 이제 editDocument 함수를 정의해야합니다. 다음 코드를 main.js에 추가하십시오 :

그래서 우리는 세 가지 기능을 추가했습니다. 마지막 두 가지에 초점을 맞추겠습니다. (우리는 순간에 editdocument에 대해 이야기하겠습니다.) GenerateKey는 또한 키를 생성하여 우리를 도울 것입니다. 서비스에서 문서 인식에 사용되는 고유 한 문서 식별자입니다. 최대 길이는 20이며 특수 문자는 없습니다. 그리고 여기에 트릭이 있습니다. 문서가 저장 될 때마다 재생되어야합니다. 이것이 어디로 가는지 보십니까? 정확히! 우리는 백업 파일 이름에서 이익을 얻기 위해 키를 생성 할 것입니다.

당신이 볼 수 있듯이, 키를 생성하기 위해 우리는 유일한 백업 (있는 경우)을 검색하고 그 이름을 사용하거나 그렇지 않으면 현재 시간을 밀리 초로 얻는 것이 없으면. 더 많은 백업을 지원하려면 그 기능에서 무엇을 변경해야합니까? [도망 칩]

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

getDocumentType는 텍스트, 스프레드 시트 또는 프레젠테이션을 반환합니다. Office Office는 어느 편집기를 열어야하는지 알아야합니다. editDocument는 우리가 여기있는 것입니다. 이것이 당신이 모든 것을 기다리고있는 것입니다. 여기서 우리는 자리 표시 자 Div의 ID를 전달하는 doceditor 객체와 많은 구성이있는 객체를 인스턴스화합니다. doceditor configuration 지금까지 보여준 것은 Doceditor를 인스턴스화하는 데 필요한 최소 옵션입니다. 문서의 고급 매개 변수 섹션을 확인하여 모든 옵션에서 이익을 얻을 수있는 방법을 확인해야합니다. 그 동안 기본 사항을 통해 당신을 데려가겠습니다.

맨 위에는 문서 필드가 있습니다. 문서 필드는 문서 필드를 가지고 있습니다. 그러면 우리는 앞서 본 것처럼 텍스트, 스프레드 시트 또는 프레젠테이션이 될 수있는 DocumentType를 가지고 있습니다. 바로 아래 바로 editorConfig 객체로, 맞춤법 체크, 유닛 및 줌과 같은 것들을 설정할 수 있습니다. 이 경우 문서 서버가 파일을 저장하는 데 사용할 URL의 /트랙 경로 인 CallbackUrl을 사용하고 있습니다.

결론 우리는 끝났고, 당신은 웹 앱과 함께 전용 문서를 설정하고 통합하는 방법을 배웠습니다. 권한, 공유, 커스터마이즈 및 전용 사무실로 할 수있는 다른 많은 것들과 같이 우리가 빠져 나가는 것이 많이 있습니다. 제품을 계속 개선 할 수있는 충분한 정보가 있거나 처음부터 새로운 프로젝트를 시작하기위한 영감을 얻을 수 있기를 바랍니다. 현재와 ​​같은 시간은 없습니다.

좋아요, 다음에 뵙겠습니다. 그 동안 계속 코딩하고 당신이 그 동안 즐거운 시간을 보내는 것을 잊지 마십시오!

전용

로 웹 앱에 사무실 기능을 추가하는 것에 대한 자주 묻는 질문 (FAQ) 기존 웹 애플리케이션에 전신을 통합하려면 어떻게 할 수 있습니까?

기존 웹 애플리케이션에 만 오피스를 통합하는 데 몇 단계가 필요합니다. 먼저, 유일한 오피스 문서 서버를 설치해야합니다. 권장 방법 인 Docker를 사용하거나 수동으로 수행 할 수 있습니다. 문서 서버가 설치되면 Office API를 사용하여 웹 응용 프로그램에 통합 할 수 있습니다. API는 문서, 스프레드 시트 및 프레젠테이션으로 작업하기위한 일련의 방법을 제공합니다. 이 메소드를 사용하여 웹 응용 프로그램에서 문서를 열고 편집하고 저장할 수 있습니다.

내 웹 애플리케이션에서 전용 사무소를 사용하면 어떤 이점이 있습니까?

Office는 웹 애플리케이션에 몇 가지 이점을 제공합니다. 이를 통해 사용자는 문서를 다운로드하거나 별도의 프로그램을 사용할 필요없이 응용 프로그램에서 직접 작성,보기 및 편집 할 수 있습니다. 이것은 사용자 경험과 생산성을 크게 향상시킬 수 있습니다. Offoffice는 또한 실시간 협업을 지원하므로 여러 사용자가 동시에 동일한 문서에서 동시에 작업 할 수 있습니다. 또한 Office만이 Microsoft Office 형식 및 OpenDocument 형식을 포함하여 광범위한 문서 형식을 지원합니다. react와 함께 전신을 사용할 수 있습니까?

예, Office Office 만 반응과 함께 사용할 수 있습니다. 유일한 오피스 API는 Office를 React 애플리케이션에 통합하는 데 사용할 수있는 React 구성 요소를 제공합니다. 이 구성 요소는 문서로 작업하기위한 소품과 방법을 제공합니다. 이 소품과 방법을 사용하여 React 응용 프로그램에서 문서를 열고 편집하고 저장할 수 있습니다.

유일한 오피스 인터페이스를 사용자 정의 할 수있는 방법

사용자 정의 객체를 사용하여 유일한 오피스 인터페이스를 사용자 정의 할 수 있습니다. Alloffice API가 제공합니다. 이 객체를 사용하면 유일한 오피스 인터페이스의 모양과 동작을 변경할 수 있습니다. 예를 들어, 색 구성표를 변경하고 특정 버튼을 숨기거나 표시하며 특정 기능을 활성화하거나 비활성화 할 수 있습니다.

는 단지 보안이 있습니까?

그렇습니다. SSL 암호화를 사용하여 대중 교통 데이터를 보호하며 문서에 액세스 할 수있는 사람을 제어 할 수 있습니다. 또한, Office는 오픈 소스입니다. 즉, 코드는 검토 및 조사에 공개적으로 사용할 수 있음을 의미합니다.

Office 만 실시간 공동 작업을 지원합니까?

예, Office는 실시간 협업을 지원합니다. 즉, 여러 사용자가 동일한 문서에서 동시에 작업 할 수 있으며 서로의 실시간 변경 사항을 볼 수 있습니다. 이것은 팀워크와 생산성을 크게 향상시킬 수 있습니다.

다른 JavaScript 프레임 워크와 함께만 사용 할 수 있습니까?

예, Angular 및 VUE와 같은 다른 JavaScript 프레임 워크와 함께 사용될 수 있습니다. 유일한 오피스 API는 이러한 프레임 워크에 대한 구성 요소를 제공하므로 전용 오피스를 각도 또는 vue 응용 프로그램에 통합 할 수 있습니다.

전용 문서에서 어떤 유형의 문서를 사용할 수 있습니까?

AloyOffice는 광범위한 지원을 지원합니다. Microsoft Office 형식 (예 : .docx, .xlsx 및 .pptx) 및 OpenDocument 형식 (예 : .odt, .ods 및 .odp)을 포함한 문서 형식. 또한 .txt 및 .csv와 같은 다른 형식을 지원합니다.

모바일 장치에서만 Office를 사용할 수 있습니까?

그렇습니다. 이것은 사용자가 스마트 폰이나 태블릿에서 문서를 작성,보기 및 편집 할 수 있음을 의미하여 장치 전체에서 완벽한 경험을 제공합니다. Office -Office 개발자를위한 커뮤니티. 이 커뮤니티는 개발자가 질문을하고 팁과 요령을 공유하며 프로젝트에 대해 협력 할 수있는 포럼을 제공합니다. 전용 사무실로 발전하는 사람에게는 훌륭한 자료입니다.

위 내용은 Office와 함께 웹 앱에 사무실 기능을 추가하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!