文件在線預(yù)覽模塊（多格式轉(zhuǎn)PDF文件）
說明：本項(xiàng)目是將一些常見的技術(shù)做了整合，幫助那些需要在線預(yù)覽文件或正在尋找 office 轉(zhuǎn) pdf 文件預(yù)覽的同學(xué)。
2023新增說明： 《文檔轉(zhuǎn)換預(yù)覽技術(shù)說明》：https://www.yuque.com/hcwdc/open/pos2lih1vi3248g9
已經(jīng)將部分的教程進(jìn)行了整合優(yōu)化，放到了語雀的平臺上，原先的老教程依然可以看。
基于這個技術(shù)做的知識庫管理系統(tǒng)：https://gitee.com/hcwdc/knowledgebase
已經(jīng)實(shí)現(xiàn)功能如下：
- 多格式轉(zhuǎn)換為 PDF 格式
- OFFICE 轉(zhuǎn)換為 PNG 格式
- 在線預(yù)覽文件
- 手機(jī)預(yù)覽查看文件
現(xiàn)已支持格式如下
- 圖片預(yù)覽：.gif、bmp、jpeg、jpg、png、ico、svg
- 文檔預(yù)覽：.doc、docx、xls、xlsx、ppt、pptx
- PDF 文件：pdf、PDF 文件壓縮
- 文本文件：txt
- 音頻文件：mp3、ogg、wav
- 視頻文件：mp4、webm、mkv
界面展示
本地啟動后訪問頁面地址為：http://localhost:8301/index
運(yùn)行方式
【必須】程序運(yùn)行所在環(huán)境安裝 LibreOffice，PDF 轉(zhuǎn)換基于 LibreOffice 完成(OpenOffice 也一樣可用)
安裝參考教程：http://wiki.nooss.cn/archives/420.html
Linux 安裝字體(不安裝會出現(xiàn)亂碼問題)：http://wiki.nooss.cn/archives/406.html
- 1、直接復(fù)制源碼里的文件搬家至你自己的代碼中
- 2、將此 Demo 打包成為一個 jar 引入到自己的項(xiàng)目中
接口介紹
文件上傳
http://ip:port/demo/upload
文件轉(zhuǎn) PDF
http://ip:port/demo/toPdf
文件轉(zhuǎn)圖片
ps：會先將文件轉(zhuǎn)為 pdf，然后使用 pdfbox 轉(zhuǎn)為圖片
http://ip:port/demo/toPng
文件轉(zhuǎn)SVG
ps：會先將文件轉(zhuǎn)為 pdf，然后使用 pdfbox 轉(zhuǎn)為svg
http://ip:port/demo/toSvg
參數(shù)配置
castle:
upload:
# 自行配置可訪問的路徑
fileDomain: http://up.hcses.cn/pdftools # 文件可訪問的地址
fileServerPath: /www/wwwroot/up.hcses.cn/pdftools/ # 原始文件的服務(wù)器存儲位置
其他說明
- 本示例轉(zhuǎn)換 PDF 部分采用了LibreOffice工具
- PDF 轉(zhuǎn)換圖片使用了PDFBox組件
- 感謝hutool組件
項(xiàng)目關(guān)聯(lián)關(guān)鍵詞
word 轉(zhuǎn) pdf、word 轉(zhuǎn)圖片、office 格式轉(zhuǎn)換、在線文件預(yù)覽
文檔轉(zhuǎn)換預(yù)覽技術(shù)說明
同步轉(zhuǎn)換
即用戶上傳文檔提交接口瞬間，系統(tǒng)會立即進(jìn)行轉(zhuǎn)換。
優(yōu)點(diǎn)：用戶一直在loading等待，轉(zhuǎn)換完成可見數(shù)據(jù)。
缺點(diǎn)：同步轉(zhuǎn)換容易造成頁面卡頓，轉(zhuǎn)換時間超長的情況下，系統(tǒng)接口會超時。
異步轉(zhuǎn)換
即用戶上傳文檔提交接口瞬間，系統(tǒng)不會立即進(jìn)行轉(zhuǎn)換，而是將文檔放入轉(zhuǎn)換隊(duì)列，由后臺的轉(zhuǎn)換進(jìn)程進(jìn)行轉(zhuǎn)換。
優(yōu)點(diǎn)：大量文件可同時進(jìn)行轉(zhuǎn)換，不會造成卡頓。
缺點(diǎn)：無法實(shí)時的查看數(shù)據(jù)。
主要技術(shù)
| 名稱 | 用途 | 地址 |
|---|---|---|
| Libreoffice | office轉(zhuǎn)pdf | https://zh-cn.libreoffice.org/ |
| PDFBox | pdf轉(zhuǎn)圖片 | https://pdfbox.apache.org/ |
| PDF2SVG | pdf轉(zhuǎn)svg | https://github.com/dawbarton/pdf2svg |
| Calibre | epub、mobi等電子書轉(zhuǎn)為pdf | https://github.com/kovidgoyal/calibre |
| MuPDF | PDF和XPS解析和渲染引擎，可用于將PDF轉(zhuǎn)為svg、png等圖片 | https://www.mupdf.com/ |
| SVGO | 壓縮svg圖片大小 | https://github.com/svg/svgo |
| GZIP壓縮 | 對svg文件壓縮 | ----- |
亂碼問題處理
亂碼主要是由字體引起的，安裝字體即可解決該問題。
幫助文檔
| 名稱 | 地址 |
|---|---|
| 《Linux環(huán)境安裝Libreoffice》 | https://www.yuque.com/hcwdc/open/rydxw6sb6yhqvu0b |
| 《Windows環(huán)境安裝Libreoffice》 | https://www.yuque.com/hcwdc/open/qygk4dubimetzosh |
| 《Linux字體安裝》 | https://www.yuque.com/hcwdc/open/oviiv0v5e724um6s |
前端預(yù)覽彈出層用法
在頁面 head 部分引入 <script src="preview.js"></script>
$Preview 參數(shù)
| 參數(shù) | 說明 | 值 |
|---|---|---|
| type | 傳入文件的粗類型 | txt / img / pdf / mp3 / mp4 |
| modal | 所有打開的彈窗列表 | Array<Modal> |
$Preview 方法
show 打開彈窗
window.$Preview.show : (urls: string | Array<string>, options: Options) => $Preview
// e.g
window.$Preview.show('http://123.png')
window.$Preview.show(['http://123.png', 'http://456.png'])
window.$Preview.show(['http://123.png', 'http://456.png'], {
active: 1
})
urls: Array<string> // 展示的文件地址列表
options: {
active: number, // 打開時展示第幾張 下標(biāo)從 0 開始
}
closeAll 關(guān)閉所有彈窗
window.$Preview.closeAll : () => void
error 當(dāng)解析文件路徑錯誤時執(zhí)行
暫時處理為 alert
可以根據(jù)需要自行覆蓋
window.$Preview.error : (msg) => void
/**
覆蓋代理使用
覆蓋后 alert 將不再彈出
*/
window.$Preview.error = (msg) => {
console.log(msg)
}
formatType 粗解析某個路徑的文件格式
window.$Preview.formatType : (url: string) => 'txt' | 'img' | 'pdf' | 'mp3' | 'mp4'
formatShowType 返回某個路徑的文件格式
window.$Preview.formatShowType : (url: string) => FileType
方案二 ASPOSE
https://www.aspose.com/zh/
文章來源：http://www.zghlxwxcb.cn/news/detail-819286.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-819286.html
到了這里，關(guān)于OpenSource - 文件在線預(yù)覽模塊（多格式轉(zhuǎn) PDF 文件）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
