網(wǎng)站后臺(tái)圖片上傳失敗福建百度seo排名點(diǎn)擊軟件
ONLYOFFICE是一項(xiàng)功能強(qiáng)大的開(kāi)源文檔編輯器,可以將文本文檔、電子表格和演示文稿、電子表單編輯功能集成至任何編程語(yǔ)言編寫(xiě)的 Web 應(yīng)用程序中。最新的7.5版本編輯器可以支持編輯PDF文件(批注、繪圖等)。在本文中,我們會(huì)帶你了解如何將ONLYOFFICE集成到你的Python應(yīng)用程序中。
為此,我們將在 Python 上創(chuàng)建一個(gè)簡(jiǎn)單的文檔管理系統(tǒng),并將 ONLYOFFICE 文檔編輯器進(jìn)行集成,其實(shí)它比你想象的更簡(jiǎn)單。
Python 中的 DMS
在這一part中,我們先編寫(xiě)一個(gè) Python 應(yīng)用程序,然后在示例中展示與 ONLYOFFICE 的集成。你計(jì)劃集成編輯器的應(yīng)用程序很可能具有需要打開(kāi)以進(jìn)行查看/編輯的文件列表。因此,讓我們創(chuàng)建一個(gè)具有此功能的應(yīng)用程序,并且還應(yīng)該支持下載文件。
我們使用 Bottle 框架。你可以用 pip install Bottle 命令將其安裝在工作目錄中?,F(xiàn)在我們需要?jiǎng)?chuàng)建文件main.py(應(yīng)用程序的代碼)和index.tpl(模板),然后將以下代碼添加到main.py文件中:
from bottle import route, run, template, get, static_file # connecting the framework and the necessary components
@route('/') # setting up routing for requests for /
def index():return template('index.tpl') # showing template in response to requestrun(host="localhost", port=8080) # running the application on port 8080
當(dāng)我們啟動(dòng)應(yīng)用程序時(shí),會(huì)在 http://localhost:8080 上看到一個(gè)空白頁(yè)面。由于文檔服務(wù)器無(wú)法從頭開(kāi)始創(chuàng)建新文檔,因此我們必須添加默認(rèn)文件并在模板中形成其名稱(chēng)列表。因此,我們創(chuàng)建一個(gè)文件夾 files ,并在其中放入 3 個(gè)文件(docx、xlsx 和 pptx)。
我們將使用 listdir 組件來(lái)讀取它們的名稱(chēng)。
from os import listdir
現(xiàn)在讓我們?yōu)?files 文件夾中的所有文件名創(chuàng)建一個(gè)變量:
sample_files = [f for f in listdir('files')]
要在模板中使用此變量,我們需要通過(guò)template方法傳遞它:
def index():return template('index.tpl', sample_files=sample_files)
讓我們?cè)谀0逯酗@示這個(gè)變量:
%for file in sample_files:<div><span>{{file}}</span></div>
% end
重新啟動(dòng)應(yīng)用程序后,我們可以在頁(yè)面上看到文件名列表?,F(xiàn)在我們必須使所有應(yīng)用程序用戶(hù)都可以使用這些文件。
這是一種新方法:
@get("/files/<filepath:re:.*\.*>")
def show_sample_files(filepath):return static_file(filepath, root="files")
在 Python 應(yīng)用程序中查看文檔
使用 ONLYOFFICE 編輯器安裝文檔服務(wù)器。有很多安裝選項(xiàng),但我們建議使用 Docker:
docker run -itd -p 80:80 onlyoffice/documentserver-de
連接模板中的文檔編輯器 API:
<script type="text/javascript" src="editor_url/web-apps/apps/api/documents/api.js"></script>
editor_url 是文檔編輯器的鏈接。
是一個(gè)按鈕,用于打開(kāi)每個(gè)文件進(jìn)行查看:
<button onclick="view('files/{{file}}')">view</button>
現(xiàn)在我們需要添加一個(gè)帶有 id 的 div:
<div id="editor"></div>
文檔編輯器將在此 div 中打開(kāi)。但只有在我們調(diào)用將打開(kāi)編輯器的函數(shù)之后才行。
<script>
function view(filename) {if (/docx$/.exec(filename)) {filetype = "text"}if (/xlsx$/.exec(filename)) {filetype = "spreadsheet"}if (/pptx$/.exec(filename)) {filetype = "presentation",title: filename}new DocsAPI.DocEditor("editor",{documentType: filetype,document: {url: "host_url" + '/' + filename,title: filename},editorConfig: {mode: 'view'}});}
</script>
DocEditor 函數(shù)有兩個(gè)參數(shù):將打開(kāi)編輯器的元素的 id 和包含編輯器設(shè)置的 JSON。
所有參數(shù)都可以在官方API文檔中找到。在此示例中,我們使用強(qiáng)制參數(shù) documentType 、 document.url 和 editorConfig.mode 。我們還添加標(biāo)題 - 這是將在編輯器中顯示的文件名。
文檔類(lèi)型 (documentType) 將通過(guò)其格式進(jìn)行標(biāo)識(shí)(docx 表示文本,xlsx 表示電子表格,pptx 表示演示文稿)。
注意 document.url。這是我們要打開(kāi)的文件的鏈接。
現(xiàn)在,我們已經(jīng)做好了在 Python 應(yīng)用程序中查看文檔的準(zhǔn)備。
編輯文件
讓我們添加“編輯”按鈕:
<button onclick="edit('files/{{file}}')">edit</button>
現(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)新函數(shù)來(lái)打開(kāi)文件進(jìn)行編輯。它類(lèi)似于 View 函數(shù),所以讓我們將普通的部分作為一個(gè)單獨(dú)的函數(shù)。
現(xiàn)在我們有3個(gè)函數(shù):
<script>var editor;function view(filename) {if (editor) {editor.destroyEditor()}editor = new DocsAPI.DocEditor("editor",{documentType: get_file_type(filename),document: {url: "host_url" + '/' + filename,title: filename},editorConfig: {mode: 'view'}});}function edit(filename) {if (editor) {editor.destroyEditor()}editor = new DocsAPI.DocEditor("editor",{documentType: get_file_type(filename),document: {url: "host_url" + '/' + filename,title: filename}});}function get_file_type(filename) {if (/docx$/.exec(filename)) {return "text"}if (/xlsx$/.exec(filename)) {return "spreadsheet"}if (/pptx$/.exec(filename)) {return "presentation"}}
</script>
destroyEditor 將關(guān)閉已打開(kāi)的編輯器。
默認(rèn)情況下, editorConfig 參數(shù)的值為 {"mode": "edit"} ,這就是 edit() 函數(shù)中缺少它的原因。
現(xiàn)在將打開(kāi)文件進(jìn)行編輯。
協(xié)同編輯文檔
協(xié)同編輯是通過(guò)在編輯器設(shè)置中對(duì)同一文檔使用相同的 document.key 來(lái)實(shí)現(xiàn)的。如果沒(méi)有此密鑰,編輯器將在您每次打開(kāi)文件時(shí)創(chuàng)建編輯會(huì)話(huà)。
為了使用戶(hù)連接到同一編輯會(huì)話(huà)進(jìn)行共同編輯,我們需要為每個(gè)文檔設(shè)置唯一的密鑰。讓我們使用文件名+“_key”格式的密鑰。我們需要將其添加到存在document的所有配置中。
document: {url: "host_url" + '/' + filepath,title: filename,key: filename + '_key'},
保存文件
ONLYOFFICE 通常會(huì)存儲(chǔ)您在其中工作時(shí)對(duì)文檔所做的所有更改。關(guān)閉編輯器后,Document Server 構(gòu)建要保存的文件版本并將請(qǐng)求發(fā)送到callbackUrl 地址。該請(qǐng)求包含 document.key 和剛剛構(gòu)建的文件的鏈接。
在生成中,您將使用 document.key 查找文件的舊版本并將其替換為新版本。在我們的例子中,我們沒(méi)有任何數(shù)據(jù)庫(kù),所以我們只是使用callbackUrl 發(fā)送文件名。
在editorConfig.callbackUrl的設(shè)置中指定callbackUrl。添加此參數(shù)后,edit()方法將如下所示:
function edit(filename) {const filepath = 'files/' + filename;if (editor) {editor.destroyEditor()}editor = new DocsAPI.DocEditor("editor",{documentType: get_file_type(filepath),document: {url: "host_url" + '/' + filepath,title: filename, key: filename + '_key'},editorConfig: {mode: 'edit',callbackUrl: "host_url" + '/callback' + '&filename=' + filename // add file name as a request parameter}});}
現(xiàn)在我們需要編寫(xiě)一個(gè)方法,在將 post 請(qǐng)求發(fā)送到 /callback 地址后保存文件:
@post("/callback") # processing post requests for /callback
def callback():if request.json['status'] == 2:file = requests.get(request.json['url']).contentwith open('files/' + request.query['filename'], 'wb') as f:f.write(file)return "{\"error\":0}"
# status 2 是構(gòu)建的文件。有關(guān)所有狀態(tài)的更多信息可以在 API 文檔中找到。
現(xiàn)在,關(guān)閉編輯器后,文件的新版本將保存到存儲(chǔ)中。
管理用戶(hù)
如果您的應(yīng)用程序中有用戶(hù),請(qǐng)將他們的標(biāo)識(shí)符(id 和名稱(chēng))寫(xiě)入編輯器的配置中。這樣您就可以看到到底是誰(shuí)在編輯文檔。
作為示例,讓我們添加在界面中選擇用戶(hù)的功能:
<select id="user_selector" onchange="pick_user()"><option value="1" selected="selected">JD</option><option value="2">Turk</option><option value="3">Elliot</option><option value="4">Carla</option>
</select>
讓我們?cè)跇?biāo)簽 <script> 的開(kāi)頭添加函數(shù) pick_user() 的調(diào)用。在函數(shù)本身中,我們將初始化負(fù)責(zé) id 和用戶(hù)名的變量。
function pick_user() {const user_selector = document.getElementById("user_selector");this.current_user_name = user_selector.options[user_selector.selectedIndex].text;this.current_user_id = user_selector.options[user_selector.selectedIndex].value;}
現(xiàn)在我們需要使用 editorConfig.user.id 和 editorConfig.user.name 在編輯器配置中添加用戶(hù)設(shè)置。讓我們將這些參數(shù)添加到文件編輯功能中的編輯器配置中。
function edit(filename) {const filepath = 'files/' + filename;if (editor) {editor.destroyEditor()}editor = new DocsAPI.DocEditor("editor",{documentType: get_file_type(filepath),document: {url: "host_url" + '/' + filepath,title: filename},editorConfig: {mode: 'edit',callbackUrl: "host_url" + '/callback' + '?filename=' + filename,user: {id: this.current_user_id,name: this.current_user_name}}});}
我們希望這個(gè)簡(jiǎn)單的示例能夠幫助您將 ONLYOFFICE 與 Python 應(yīng)用程序集成。更多集成示例可以在 GitHub上找到。