Office文件線上預覽方案

爱吃苹果皮發表於2024-04-29

轉載:Office文件線上預覽方案

# Office文件線上預覽方案

注意

本文中展示的程式碼均為關鍵程式碼,複製貼上到您的專案中,按照實際的情況,例如文件路徑,使用者名稱等做適當修改即可使用。

在涉及到Office文件管理的各種Web專案中,時常會遇到使用者閱讀文件的時候,並不想將網站上的Office文件下載到本地,這時候就需要文件線上預覽的功能。

目前常用的文件線上預覽方案如下:

  • 轉換為HTML檔案。轉換後的HTML格式可以直接用瀏覽器檢視,但是無法完全保留原Word文件的格式和功能。例如,HTML不支援某些Word功能,轉換時Word可能會自動更改或取消內容,而且另存HTML格式還會導致文件的佈局、字型樣式等發生變化,影響文件的可讀性和專業性。

  • 呼叫第三方提供的線上預覽介面。比如呼叫永中Office、金山文件、騰訊文件等線上預覽服務,整合相對簡單,開發工作量小,但是隻能在公網環境使用,且對於超過一定大小的檔案,預覽速度會變得很慢,這意味著大檔案的處理能力受限,可能會影響使用者體驗。線上預覽文件需要先上傳到第三方官方的伺服器進行解析,然後下載到伺服器中後實現線上預覽,這種模式意味著對第三方服務的依賴,可能會因為第三方服務的問題而影響線上預覽的穩定性和速度。但是如果Web系統中儲存的是涉密文件,包含了技術秘密和經營秘密等商業秘密,甚至包含了國家機密,那麼絕對不能使用第三方預覽服務。

  • 轉換為PDF檔案(推薦)。透過轉換為PDF格式,可以確保在大多數瀏覽器和平臺上都能實現良好的相容性。PDF是一種廣泛支援的檔案格式,幾乎所有的現代瀏覽器都內建了對PDF的支援,這意味著使用者可以在沒有額外軟體的情況下直接預覽檔案。PDF格式的檔案具有很好的跨平臺性,無論是在Windows、MacOS還是Linux作業系統上,使用者都可以方便地開啟和檢視PDF檔案,這一點對於需要在不同作業系統間共享和檢視文件的使用者來說非常重要。

用PageOffice實現的Office文件線上預覽採用了轉換為PDF檔案的預覽方案,可以在公網環境使用,也可以支援物理隔絕的內網環境。

第一步: 使用PageOffice線上編輯Office檔案,可以在每次儲存檔案的時候同另存一份PDF格式的檔案,如此一來,PDF檔案和Office檔案的內容總是完全同步的。實現PageOffice線上編輯Office,儲存檔案的同時轉pdf的關鍵程式碼如下。

  • 後端程式碼:
  1. 在後端編寫程式碼呼叫webOpen方法開啟檔案之前給SaveFilePage屬性賦值(設定好儲存時由哪個地址介面負責接收處理控制元件上傳的檔案流);
Java
PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
poCtrl.setSaveFilePage("saveFile"); // 設定儲存檔案的介面地址
//webOpen的第一個引數支援能夠輸出下載檔案的Url相對地址或者檔案在伺服器上的磁碟路徑兩種方式
poCtrl.webOpen("doc/test.docx", OpenModeType.docNormalEdit, "張佚名"); // 開啟檔案
.NetCore
PageOfficeNetCore.PageOfficeCtrl POCtrl = new PageOfficeNetCore.PageOfficeCtrl(Request);
POCtrl.SaveFilePage = "SaveDoc";// 設定儲存檔案的介面地址
//webOpen的第一個引數支援能夠輸出下載檔案的Url相對地址或者檔案在伺服器上的磁碟路徑兩種方式
POCtrl.WebOpen("doc/test.docx", PageOfficeNetCore.OpenModeType.docNormalEdit, "tom");
  1. 在SaveFilePage屬性指向的地址介面中,建立FileSaver對線上開啟的Office檔案和另存的pdf檔案分別進行儲存。
Java
FileSaver fs = new FileSaver(request, response);
if(fs.getFileExtName().equals(".pdf")){
    fs.saveToFile(request.getSession().getServletContext().getRealPath("pdf/") + fs.getFileName());
}else{
    fs.saveToFile(request.getSession().getServletContext().getRealPath("doc/") + fs.getFileName());
}
fs.close();
.NetCore
PageOfficeNetCore.FileSaver fs = new PageOfficeNetCore.FileSaver(Request, Response);
await fs.LoadAsync();
string webRootPath = _webHostEnvironment.WebRootPath;
if(fs.FileExtName == ".pdf"){
  fs.SaveToFile(webRootPath + "/pdf/" + fs.FileName);
}else{
  fs.SaveToFile(webRootPath + "/doc/" + fs.FileName);
}
fs.Close();
  • 前端程式碼:

使用AddCustomToolButton新增自定義儲存按鈕,實現儲存檔案的同時另存PDF。

JavaScript
function SaveFile() {
  pageofficectrl.WebSave(); //儲存當前檔案
  pageofficectrl.WebSaveAsPDF(); //另存當前檔案為PDF格式
}
OnPageOfficeCtrlInit() {
  // PageOffice的初始化事件回撥函式
  pageofficectrl.AddCustomToolButton("儲存", "SaveFile()", 1);
}

第二步: 需要線上預覽Office文件的環節,只需整合呼叫PageOffice的PDFCtrl元件線上開啟PDF檔案即可。如果還想實現只讓使用者瀏覽檔案內容,不允許使用者下載另存檔案的功能,可以設定pdfCtrl物件的AllowCopy屬性為false,禁止檔案內容的複製操作,這樣就能實現使用者只能線上檢視檔案,而獲取不到檔案的下載地址,也無法另存PDF檔案到本地,實現檔案的安全瀏覽。

Java
PDFCtrl pdfCtrl = new PDFCtrl(request);
pdfCtrl.setAllowCopy(false);//禁止複製
pdfCtrl.webOpen("D:\\documents\\test.pdf");
// Linux伺服器新增字首:file://
// pdfCtrl.webOpen("file://"+"/root/documents/test.pdf");
.NetCore
PageOfficeNetCore.PDFCtrl PdfCtrl = new PageOfficeNetCore.PDFCtrl(Request);
PdfCtrl.AllowCopy = false; //禁止複製
PdfCtrl.WebOpen("doc/test.pdf");

提示

PageOffice內建了PDF閱讀器,所以即使客戶端電腦未安裝Office或WPS軟體也可以線上開啟PDF檔案。

相關文章