實如今線預覽PDF的幾種解決方案

因客戶須要實現PDF的預覽處理，在網上找了一些PDF在線預覽的解決方案，有的用PDFJS的在線預覽方式，有的使用PDFObject的嵌入式顯示，有的經過轉換JPG/PNG方式實現間接顯示的方式，開始是想經過簡單的方式，可以使用JS插件實現預覽最好，但是在線預覽老是有一些不足，如不一樣瀏覽器的兼容問題，甚至不一樣的手機平臺中展現的效果也不同，不過最好仍是採用了間接的方式，把PDF轉換爲圖片展現效果，達到客戶的要求。

一、在線實現預覽的方式

一開始我仍是很傾向使用這種方式，但願能採用一個較爲好的JS插件的方式，實現PDF的在線預覽（經過Web預覽），所以在Github上找到排名比較高的PDF插件

一看排名仍是很高的，那麼採用它應該不錯，查看自帶的PDF文件，效果仍是槓槓的。

不過客戶的要求是顯示正常的發票PDF文件，換一下文件地址，有部分信息顯示不了，找了一下沒有看到解決方法，因此效果不達標。

連基本的發票也顯示不了，那我這個就不能用它來顯示發票PDF文件了。

最後，測試了使用PDFObject（https://pdfobject.com/ ）的方式實如今線嵌入PDF顯示的方式，這個JS插件也是不錯的，一樣能夠在GitHub上能夠找到。

它的使用也是很簡單的，以下代碼所示。

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

若是須要設置預覽窗口的大小，經過設置樣式便可。

<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>

顯示的效果是正常的了，不過我在蘋果手機打開Safari瀏覽器測試發現，不能正常顯示。

所以也不能使用來進行預覽顯示。

在實際的測試中，發現安卓手機的瀏覽器對於預覽PDF也是支持不一，有些直接下載PDF，不支持預覽顯示。

爲了不這些問題，最好找了一個折中的方案，把PDF轉換爲圖片進行顯示，圖片在不一樣的瀏覽器中顯示但是沒有問題的。

二、PDF轉換圖片進行顯示

把PDF轉換爲圖片也有不少控件處理，例如Aspose.Pdf、Spire.Pdf、 pdfiumviewer 等等，不一樣的第三方類庫使用的方法有所差別，不過思路都很相似。

原本傾向於使用Aspose.Pdf的，不過發現轉換後的發票信息仍是缺失了某些中文字符或者亂碼，致使不能正常顯示。

後來尋找Spire.Pdf 版本以及對應的綠色版本，終於可以轉換爲正確的格式了，所以也就使用這個第三方控件進行轉換圖片使用了。

至於在線預覽，咱們在第一次請求PDF預覽文件的時候，生成對應的圖片文件，後面直接返回路徑便可。

實現的預覽效果以下所示。

因爲咱們是在asp.net MVC的項目上進行顯示的，所以須要修改控制器的處理邏輯，對圖片的生成進行判斷處理便可。

控制器後臺的實現代碼以下所示。

                //判斷是否存在PDF生成的圖片文件，
                //生成的jpg文件名爲附件的ID
                string pdfjpgPath = string.Format("/GenerateFiles/pdf/{0}.jpg", info.ID);
                string pdfjpg = Server.MapPath(pdfjpgPath);

                //PDF文件路徑，相對目錄便可
                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);
                }
                //存儲一個路徑
                info.SavePath = pdfjpgPath;//修改使用這個屬性返回使用

最後返回對應的Json信息便可

                //序列號返回對象信息
                string result = JsonConvert.SerializeObject(info, Formatting.Indented);
                return Content(result);

咱們在頁面視圖中，經過ajax請求處理便可實現圖片的動態顯示了。

        //刷新列表
    var ID = '';
    function Refresh() {
        var filename = $("#WHC_FileName").val();
        //獲取或生成對應的PDF文件，根據路徑顯示
        $.getJSON("/PdfView/FindByFileName?r=" + Math.random() + "&name=" + filename, function (info) {
            if (info != '') {
                //獲取圖片路徑，設置顯示
                $("#imgfapiao").attr("src", info.SavePath);
            }
        });
    }

最後實現了圖片的預覽展現。

上面就是個人一個解決思路，若是您有更好的方式解決PDF在線預覽問題，歡迎彼此交流。