Pdf文檔轉換及預覽 · 組件庫

# 一、介紹前端框架的文件預覽功能，實現思路是后端UPMS服務將office文檔先轉換成pdf文件，前端頁面展示PDF文件，后端采用openoffice轉換office文檔。目前已知的可以通過openoffice將文檔轉換為PDF或者HTML以及CSV。其他的轉換類型需要自行摸索。 ***** # 二、openoffice安裝 [安裝包下載地址](http://www.openoffice.org/download/index.html) ~~~ 1、下載安裝包，部署UPMS服務器的任一目錄，命令下載： wget https://jaist.dl.sourceforge.net/project/openofficeorg.mirror/4.1.7/binaries/zh-CN/Apache_OpenOffice_4.1.7_Linux_x86-64_install-rpm_zh-CN.tar.gz 2、解壓：tar -zxvf Apache_OpenOffice_4.1.7_Linux_x86-64_install-rpm_zh-CN.tar.gz 3、進入cd zh-CN/RPMS，安裝必要的包，執行 yum localinstall *.rpm 4、再進入RPMS/desktop-integration目錄，執行：rpm -ivh openoffice4.1.7-redhat-menus-4.1.7-9790.noarch.rpm 5、啟動Openoffice服務： cd /opt/openoffice4/program soffice -headless -accept="socket,host=127.0.0.1,port=8100;urp;" -nofirststartwizard & 完成本地啟動，如果需要遠程訪問，需要將host地址改成機器對應IP地址 6、查看服務是否啟動（端口8100是否被soffice占用）：netstat -lnp |grep 8100 顯示結果：tcp 0 0 127.0.0.1:8100 0.0.0.0:* LISTEN 19501/soffice.bin 7、因為一般安裝完后openoffice在轉換pdf時候會因為缺失字體造成中文亂碼情況，所以一般要將window下的字體庫打包拷貝到linux服務器上。 (1) 查看系統字體文件cat /etc/fonts/fonts.conf (2) 將window下的字符庫上傳到linux下。一般是在/usr/share/fonts目錄下，創建fonts目錄。 (3) 執行fc-cache。 (4) 重啟openoffice。 ~~~ ***** # 三、中文字體安裝如果需要預覽的文檔中包含中文字體，則需要在安裝了openoffice軟件的linux服務器上安裝中文字體，安裝過程如下： ~~~ 1、使用fc-list查看服務器系統中已經安裝的字體；如果沒有該命令則可以根據實際情況使用如下命令安裝：在centos上，使用如下命令進行安裝： yum install -y fontconfig mkfontscale 在ubuntu上，使用如下命令進行安裝： sudo apt-get -y install fontconfig xfonts-utils 如果要查看系統中已經安裝的中文字體，我們可以使用如下命令： fc-list :lang=zh 2、上傳Windows系統中的中文字體安裝文件到服務器上的/usr/share/fonts/目錄：進入C:\Windows\Fonts目錄，該目錄下的所有的字體安裝包都是可以上傳到服務器的選擇一個或幾個常用的中文字體安裝包上傳到服務器的/usr/share/fonts/目錄然后建立字體索引信息，更新字體緩存，使用如下命令： cd /usr/share/fonts/ mkfontscale mkfontdir fc-cache 3、重啟openoffice 使用kill命令殺死openoffice進程執行上一章節的第5步驟 ~~~ ***** # 四、項目中使用openoffice將文檔轉換為PDF預覽使用快開平臺框架在項目中進行文檔轉換及預覽時，需要文件先上傳到minio文件服務中心，然后才能進行后續的轉換及預覽 ## 4.1、修改upms配置 1. 進入nacos注冊中心 2. 進入“配置管理/配置中心”菜單頁面 3. 編輯sca-upms-biz的服務配置 4. 修改配置內容，示例說明如下： ``` #openoffice配置 jodconverter: local: enabled: false #是否啟用openoffice max-tasks-per-process: 10 #設置一個office進程在重啟之前所能執行的最大任務數。默認為200個 port-numbers: 8100 #openoffice端口號 office-home: /opt/openoffice4/ #該屬性是office的安裝目錄 . ``` 更詳細的配置說明可以前往該網址查看[jobconverter文檔詳解](https://blog.csdn.net/qingtian_1993/article/details/79901843) 5. 發布最新配置 6. 重啟upms服務 ***** ## 4.2、bootstrap頁面使用預覽功能示例 ![](https://img.kancloud.cn/a0/59/a05947f8e10588726ef7482460f5244e_2160x1057.jpg) ``` function viewFile(filename,bucketName) { var urlView = api + '/admin/sys-file/fileView/' + bucketName + '/' + filename var windowUrl = window.URL || window.webkitURL;//處理瀏覽器兼容性 var xhr = new XMLHttpRequest(); xhr.open("GET", urlView, true); xhr.responseType = "blob"; // xhr.setRequestHeader("Authorization", 'Bearer ' + session.get('token'),); xhr.onload = function () { if (this.status == 200) { var blob = this.response; var url=""; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(blob); } else if (window.webkitURL != undefined) { // webkit or chrome try { url = window.webkitURL.createObjectURL(blob); } catch (error) {} } else if (window.URL != undefined) { // mozilla(firefox) try { url = window.URL.createObjectURL(blob); } catch (error) {} } window.open('/static/js/pdf/web/viewer.html?file='+encodeURIComponent(url)) } } xhr.send(); } ``` 主要是訪問`/admin/sys-file/fileView/ + bucketName + '/' + filename`后臺請求地址，其中需要傳遞的那個參數分別是minio中的桶名稱bucketName和需要預覽的文件名稱filename。更完整的示例可以參看bootstrap前端框架下的`static\pages\sysadm\file`目錄下的fileList.js文件 ***** ## 4.3、vue頁面使用預覽功能示例 ![頁面示例](https://img.kancloud.cn/a0/6d/a06d76cf136e51fd4ef424466ca171e0_2149x680.jpg) ``` <script> import { handleDown,previewPdf } from '@/util/util' export default { name: 'sys-file', components:{uploadCard}, data() { return { } }, created() { }, mounted: function() { }, computed: { ...mapGetters(['permissions']), }, methods: { viewPdf(row, index){ let type = matchType(row.fileName) if (type === 'word' || type === 'excel' || type === 'ppt' || type === 'pdf' || type === 'txt'){ previewPdf(row.bucketName,row.fileName) }else if (type === 'image' || type === 'video' || type === 'radio'){ this.$message.error('該文件暫不支持預覽') }else{ this.$message.error('該文件暫不支持預覽') } }, } } </script> ``` 調用`previewPdf`方法即可在瀏覽器中打開新的標簽頁進行文件預覽，可以參考vue前端框架下的`src\views\admin\file`下的index.vue文件。 ***** ## 4.4、在后臺代碼中集成openoffice ### 首先添加依賴 ``` <dependency> <groupId>org.jodconverter</groupId> <artifactId>jodconverter-spring-boot-starter</artifactId> <version>4.3.0</version> </dependency> <dependency> <groupId>org.jodconverter</groupId> <artifactId>jodconverter-core</artifactId> <version>4.3.0</version> </dependency> <dependency> <groupId>org.jodconverter</groupId> <artifactId>jodconverter-local</artifactId> <version>4.3.0</version> </dependency>  <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.8.0</version> </dependency> <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>xstream</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.3.2</version> </dependency> <dependency> <groupId>com.github.livesense</groupId> <artifactId>jodconverter-core</artifactId> <version>1.0.5</version> </dependency> ``` ### 添加配置配置說明參考本文檔`4.1、修改upms配置`章節 ### 注入類 ``` @Autowired(required = false) private DocumentConverter converter; ``` ### 使用示例 ``` /** * 文件轉PDF預覽 * * @param bucket * 桶名稱 * @param fileName * 文件空間/名稱 * @param response * @return */ @Inner(false) @GetMapping("/fileView/{bucket}/{fileName}") public void fileView(@PathVariable String bucket, @PathVariable String fileName, HttpServletResponse response) { //獲取文件并轉換為input流 InputStream inputStream = sysFileService.getFile(bucket, fileName); File targetFile = this.transfer(fileName, inputStream); try { if (targetFile != null) { response.setContentType("application/pdf; charset=UTF-8"); IoUtil.copy(cn.hutool.core.io.IoUtil.toStream(targetFile), response.getOutputStream()); } } catch (Exception e) { log.error("文件轉換異常: {}", e.getLocalizedMessage()); } finally { cn.hutool.core.io.IoUtil.close(inputStream); if (targetFile != null) { //為了不占用服務器資源，故獲取PDF文件流后，最后將臨時文件刪除 targetFile.deleteOnExit(); } } } /* * 將文件轉換為PDF文檔，根據需求可轉換為其他類型 */ private File transfer(String fileName, InputStream inputStream) { File targetFile = null; try { targetFile = java.io.File.createTempFile(fileName.substring(0, fileName.lastIndexOf(".")), ".pdf"); // 文件轉化 converter.convert(inputStream).to(targetFile).execute(); } catch (Exception e) { log.error("文件讀取異常: {}", e.getLocalizedMessage()); } return targetFile; } ``` 網上可參考的集成示例：[SpringBoot2.x整合OpenOffice4](https://blog.csdn.net/li_jiazhi/article/details/105386337)、[SpringBoot集成jodconverter使用openoffice將word轉為pdf](https://www.jianshu.com/p/77e0b6f5c7dd) ### 設置自定義轉換PDF寬度當excel寬度超過A4紙寬度后，需要實現如下代碼，將PDF的寬度設置長，就可以避免excel轉換為PDF時被默認截取 ``` import org.jodconverter.core.DocumentConverter; import org.jodconverter.core.document.DocumentFormatRegistry; import org.jodconverter.core.office.OfficeManager; import org.jodconverter.local.LocalConverter; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; /** * @Author xiangyu * @Date 2021/3/19 17:13 * @Version 1.0 */ @Configuration public class JodConverterConfiguration { @Bean DocumentConverter localDocumentConverter(OfficeManager localOfficeManager, DocumentFormatRegistry documentFormatRegistry) { return LocalConverter.builder().filterChain( // new PageMarginsFilter(0,0,0,0), // 對word有用，對excel似乎沒什么用 new JodConverterRefreshFilter(true) ).officeManager(localOfficeManager).formatRegistry(documentFormatRegistry).build(); } } ``` ``` import com.sun.star.awt.Size; import com.sun.star.beans.PropertyValue; import com.sun.star.lang.IllegalArgumentException; import com.sun.star.lang.XComponent; import com.sun.star.uno.UnoRuntime; import com.sun.star.view.PaperFormat; import com.sun.star.view.XPrintable; import org.jodconverter.core.office.OfficeContext; import org.jodconverter.local.filter.FilterChain; import org.jodconverter.local.filter.RefreshFilter; /** * @Author xiangyu * @Date 2021/3/19 17:16 * @Version 1.0 */ public class JodConverterRefreshFilter extends RefreshFilter { public final static Size A6, A5, A4, A3, A2, A1, A0; public final static Size B6, B5, B4, B3, B2, B1, B0; static { A6 = new Size(10500, 14800); A5 = new Size(14800, 21000); A4 = new Size(21000, 29700); A3 = new Size(29700, 42000); A2 = new Size(42000, 59400); A1 = new Size(59400, 84100); A0 = new Size(84100, 118900); B6 = new Size(12500, 17600); B5 = new Size(17600, 25000); B4 = new Size(25000, 35300); B3 = new Size(35300, 50000); B2 = new Size(50000, 70700); B1 = new Size(70700, 100000); B0 = new Size(100000, 141400); } /** * Creates a new refresh filter. */ public JodConverterRefreshFilter() { this(false); } /** * Creates a new refresh filter that will call or not the next filter in the chain according to * the specified argument. * * @param lastFilter If {@code true}, then the filter won't call the next filter in the chain. If * {@code false}, the next filter in the chain, if any, will be applied. */ public JodConverterRefreshFilter(final boolean lastFilter) { super(lastFilter); } @Override public void doFilter( final OfficeContext context, final XComponent document, final FilterChain chain) throws Exception { setPaperInfo(document, new Size(67000, 20000)); super.doFilter(context, document, chain); } /** * 設置紙張信息 * 請注意！！！PaperOrientation 和 PaperSize 不可以同時配置，否則有一個無效！ * <p> * The default paper format and orientation is A4 and portrait. * * @param paperSize */ private void setPaperInfo(final XComponent document, final Size paperSize) throws IllegalArgumentException { XPrintable xPrintable = UnoRuntime.queryInterface(XPrintable.class, document); PropertyValue[] printerDesc = new PropertyValue[2]; // Paper Orientation（縱向橫向） // printerDesc[0] = new PropertyValue(); // printerDesc[0].Name = "PaperOrientation"; // printerDesc[0].Value = PaperOrientation.LANDSCAPE; // Paper Format printerDesc[0] = new PropertyValue(); printerDesc[0].Name = "PaperFormat"; printerDesc[0].Value = PaperFormat.USER; // Paper Size printerDesc[1] = new PropertyValue(); printerDesc[1].Name = "PaperSize"; printerDesc[1].Value = paperSize; xPrintable.setPrinter(printerDesc); } } ```