快捷導(dǎo)航

淺談實(shí)現(xiàn)在線預(yù)覽PDF的幾種解決辦法

更新時(shí)間：2020年08月10日 09:08:01 作者：伍華聰

這篇文章主要介紹了淺談實(shí)現(xiàn)在線預(yù)覽PDF的幾種解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

因客戶需要實(shí)現(xiàn)PDF的預(yù)覽處理，在網(wǎng)上找了一些PDF在線預(yù)覽的解決方案，有的用PDFJS的在線預(yù)覽方式，有的使用PDFObject的嵌入式顯示，有的通過轉(zhuǎn)換JPG/PNG方式實(shí)現(xiàn)間接顯示的方式，開始是想通過簡單的方式，能夠使用JS插件實(shí)現(xiàn)預(yù)覽最好，可是在線預(yù)覽總是有一些不足，如不同瀏覽器的兼容問題，甚至不同的手機(jī)平臺(tái)中展示的效果也不一樣，不過最好還是采用了間接的方式，把PDF轉(zhuǎn)換為圖片展示效果，達(dá)到客戶的要求。

1、在線實(shí)現(xiàn)預(yù)覽的方式

一開始我還是很傾向使用這種方式，希望能采用一個(gè)較為好的JS插件的方式，實(shí)現(xiàn)PDF的在線預(yù)覽（通過Web預(yù)覽），因此在Github上找到排名比較高的PDF插件

一看排名還是很高的，那么采用它應(yīng)該不錯(cuò)，查看自帶的PDF文件，效果還是杠杠的。

不過客戶的要求是顯示正常的發(fā)票PDF文件，換一下文件地址，有部分信息顯示不了，找了一下沒有看到解決方法，所以效果不達(dá)標(biāo)。

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

最后，測試了使用PDFObject（https://pdfobject.com/ ）的方式實(shí)現(xiàn)在線嵌入PDF顯示的方式，這個(gè)JS插件也是不錯(cuò)的，同樣可以在GitHub上可以找到。

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

<script src="/js/pdfobject.js"></script>

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

如果需要設(shè)置預(yù)覽窗口的大小，通過設(shè)置樣式即可。

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

顯示的效果是正常的了，不過我在蘋果手機(jī)打開Safari瀏覽器測試發(fā)現(xiàn)，不能正常顯示。

因此也不能使用來進(jìn)行預(yù)覽顯示。

在實(shí)際的測試中，發(fā)現(xiàn)安卓手機(jī)的瀏覽器對(duì)于預(yù)覽PDF也是支持不一，有些直接下載PDF，不支持預(yù)覽顯示。

為了避免這些問題，最好找了一個(gè)折中的方案，把PDF轉(zhuǎn)換為圖片進(jìn)行顯示，圖片在不同的瀏覽器中顯示可是沒有問題的。

2、PDF轉(zhuǎn)換圖片進(jìn)行顯示

把PDF轉(zhuǎn)換為圖片也有很多控件處理，例如Aspose.Pdf、Spire.Pdf、 pdfiumviewer 等等，不同的第三方類庫使用的方法有所差異，不過思路都很類似。

本來傾向于使用Aspose.Pdf的，不過發(fā)現(xiàn)轉(zhuǎn)換后的發(fā)票信息還是缺失了某些中文字符或者亂碼，導(dǎo)致不能正常顯示。

后來尋找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è)陧撁嬉晥D中，通過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ù)覽展示。