实如今线预览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在线预览问题，欢迎彼此交流。