淺談實(shí)現(xiàn)在線預(yù)覽PDF的幾種解決辦法
因客戶需要實(shí)現(xiàn)PDF的預(yù)覽處理,在網(wǎng)上找了一些PDF在線預(yù)覽的解決方案,有的用PDFJS的在線預(yù)覽方式,有的使用PDFObject的嵌入式顯示,有的通過(guò)轉(zhuǎn)換JPG/PNG方式實(shí)現(xiàn)間接顯示的方式,開(kāi)始是想通過(guò)簡(jiǎn)單的方式,能夠使用JS插件實(shí)現(xiàn)預(yù)覽最好,可是在線預(yù)覽總是有一些不足,如不同瀏覽器的兼容問(wèn)題,甚至不同的手機(jī)平臺(tái)中展示的效果也不一樣,不過(guò)最好還是采用了間接的方式,把PDF轉(zhuǎn)換為圖片展示效果,達(dá)到客戶的要求。
1、在線實(shí)現(xiàn)預(yù)覽的方式
一開(kāi)始我還是很傾向使用這種方式,希望能采用一個(gè)較為好的JS插件的方式,實(shí)現(xiàn)PDF的在線預(yù)覽(通過(guò)Web預(yù)覽),因此在Github上找到排名比較高的PDF插件
一看排名還是很高的,那么采用它應(yīng)該不錯(cuò),查看自帶的PDF文件,效果還是杠杠的。
不過(guò)客戶的要求是顯示正常的發(fā)票PDF文件,換一下文件地址,有部分信息顯示不了,找了一下沒(méi)有看到解決方法,所以效果不達(dá)標(biāo)。
連基本的發(fā)票也顯示不了,那我這個(gè)就不能用它來(lái)顯示發(fā)票PDF文件了。
最后,測(cè)試了使用PDFObject(https://pdfobject.com/ )的方式實(shí)現(xiàn)在線嵌入PDF顯示的方式,這個(gè)JS插件也是不錯(cuò)的,同樣可以在GitHub上可以找到。
它的使用也是很簡(jiǎn)單的,如下代碼所示。
<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
如果需要設(shè)置預(yù)覽窗口的大小,通過(guò)設(shè)置樣式即可。
<style> .pdfobject-container { height: 500px;} .pdfobject { border: 1px solid #666; } </style>
顯示的效果是正常的了,不過(guò)我在蘋果手機(jī)打開(kāi)Safari瀏覽器測(cè)試發(fā)現(xiàn),不能正常顯示。
因此也不能使用來(lái)進(jìn)行預(yù)覽顯示。
在實(shí)際的測(cè)試中,發(fā)現(xiàn)安卓手機(jī)的瀏覽器對(duì)于預(yù)覽PDF也是支持不一,有些直接下載PDF,不支持預(yù)覽顯示。
為了避免這些問(wèn)題,最好找了一個(gè)折中的方案,把PDF轉(zhuǎn)換為圖片進(jìn)行顯示,圖片在不同的瀏覽器中顯示可是沒(méi)有問(wèn)題的。
2、PDF轉(zhuǎn)換圖片進(jìn)行顯示
把PDF轉(zhuǎn)換為圖片也有很多控件處理,例如Aspose.Pdf、Spire.Pdf、 pdfiumviewer 等等,不同的第三方類庫(kù)使用的方法有所差異,不過(guò)思路都很類似。
本來(lái)傾向于使用Aspose.Pdf的,不過(guò)發(fā)現(xiàn)轉(zhuǎn)換后的發(fā)票信息還是缺失了某些中文字符或者亂碼,導(dǎo)致不能正常顯示。
后來(lái)尋找Spire.Pdf 版本以及對(duì)應(yīng)的綠色版本,終于能夠轉(zhuǎn)換為正確的格式了,因此也就使用這個(gè)第三方控件進(jìn)行轉(zhuǎn)換圖片使用了。
至于在線預(yù)覽,我們?cè)诘谝淮握?qǐng)求PDF預(yù)覽文件的時(shí)候,生成對(duì)應(yīng)的圖片文件,后面直接返回路徑即可。
實(shí)現(xiàn)的預(yù)覽效果如下所示。
由于我們是在asp.net MVC的項(xiàng)目上進(jìn)行顯示的,因此需要修改控制器的處理邏輯,對(duì)圖片的生成進(jìn)行判斷處理即可。
控制器后臺(tái)的實(shí)現(xiàn)代碼如下所示。
//判斷是否存在PDF生成的圖片文件, //生成的jpg文件名為附件的ID string pdfjpgPath = string.Format("/GenerateFiles/pdf/{0}.jpg", info.ID); string pdfjpg = Server.MapPath(pdfjpgPath); //PDF文件路徑,相對(duì)目錄即可 string pdfPath = @"/Content/Template/fapiao.pdf"; string pdfRealPath = Server.MapPath(pdfPath); //如果不存在,則生成,否則返回已生成的文件 if(!FileUtil.IsExistFile(pdfjpg)) { //破解 ModifyInMemory_Spire.ActivateMemoryPatching(); PdfDocument doc = new PdfDocument(pdfRealPath); var image = doc.SaveAsImage(0, Spire.Pdf.Graphics.PdfImageType.Bitmap, 300, 300); FileUtil.BytesToFile(ImageHelper.ImageToBytes(image), pdfjpg); } //存儲(chǔ)一個(gè)路徑 info.SavePath = pdfjpgPath;//修改使用這個(gè)屬性返回使用
最后返回對(duì)應(yīng)的Json信息即可
//序列號(hào)返回對(duì)象信息 string result = JsonConvert.SerializeObject(info, Formatting.Indented); return Content(result);
我們?cè)陧?yè)面視圖中,通過(guò)ajax請(qǐng)求處理即可實(shí)現(xiàn)圖片的動(dòng)態(tài)顯示了。
//刷新列表 var ID = ''; function Refresh() { var filename = $("#WHC_FileName").val(); //獲取或生成對(duì)應(yīng)的PDF文件,根據(jù)路徑顯示 $.getJSON("/PdfView/FindByFileName?r=" + Math.random() + "&name=" + filename, function (info) { if (info != '') { //獲取圖片路徑,設(shè)置顯示 $("#imgfapiao").attr("src", info.SavePath); } }); }
最后實(shí)現(xiàn)了圖片的預(yù)覽展示。
上面就是我的一個(gè)解決思路,如果您有更好的方式解決PDF在線預(yù)覽問(wèn)題,歡迎彼此交流。希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Vue3 + TypeScript 開(kāi)發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開(kāi)發(fā)的內(nèi)容,感興趣的話一起來(lái)看看吧2021-08-08vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐
本文主要介紹了vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼,需要的朋友們可以學(xué)習(xí)下。2020-05-05對(duì)vue下點(diǎn)擊事件傳參和不傳參的區(qū)別詳解
今天小編就為大家分享一篇對(duì)vue下點(diǎn)擊事件傳參和不傳參的區(qū)別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決
這篇文章主要介紹了VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue-cli項(xiàng)目代理proxyTable配置exclude的方法
今天小編就為大家分享一篇vue-cli項(xiàng)目代理proxyTable配置exclude的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法
本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09