实现在线预览pdf的几种解决方案(代码片段)

关键词：

因客户需要实现PDF的预览处理，在网上找了一些PDF在线预览的解决方案，有的用PDFJS的在线预览方式，有的使用PDFObject的嵌入式显示，有的通过转换JPG/PNG方式实现间接显示的方式，开始是想通过简单的方式，能够使用JS插件实现预览最好，可是在线预览总是有一些不足，如不同浏览器的兼容问题，甚至不同的手机平台中展示的效果也不一样，不过最好还是采用了间接的方式，把PDF转换为图片展示效果，达到客户的要求。

1、在线实现预览的方式

一开始我还是很倾向使用这种方式，希望能采用一个较为好的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转换为图片进行显示，图片在不同的浏览器中显示可是没有问题的。

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

java中如何实现文件预览的功能(代码片段)

...、kkfileview文件在线预览此项目为文件文档在线预览项目解决方案，项目使用流行的springboot搭建，易上手和部署，部署好后可以独立提供预览服务，使用http接口访问，不需要和应用集成，具有跨系统跨语言... 查看详情

iospdf文件预览的几种方法

...得在文件中导入头文件#import<QuickLook/QuickLook.h>，并且实现其代理方法QLPreviewControllerDelegate使用UIDocumentInteractionController预览文件也得遵循UIDocumentInteractionControllerDelegate代理方法,UIDocumentInteractionController本身并不是一个控制器类... 查看详情

qt实现qchart的打印和打印预览的几种方法(代码片段)

实现打印预览和打印，是挺常用的功能。把其他一些内容如QTextBrowser或者QEditText打印和打印预览是容易的，因为它们都自带了print方法，可以直接输出到printer。这里介绍下Qt实现Qchart的打印和打印预览的几种方法。首... 查看详情

实现ppt在线预览，ppt转图片方案(代码片段)

PPT转图片方案：已放弃方案：poi（失真度太高）；Aspose直接转图片（收费，效果较好，备选）；微软OfficeOnline（需要基于Windows部署）；officeweb365（收费，效果可以，公有云服务）；永中DCS（收费，效果不是很好）；docsplit（命令... 查看详情

vue使用vue-pdf实现pdf在线预览(代码片段)

...文末列出了大家在实际使用的过程中可能会遇到的问题和解决方案。安装：这个没有啥背景知识可讲，我们直接跳到安装环节，vue-pdf和其他vue组件的安装并无不同，打开命令行，敲入:npminstall--savevue-pdf复制代码注意路径。别在... 查看详情

pdf在线预览解决方案——pdf.js使用(代码片段)

业务背景在C端的前端项目中，针对用户会有多种规则需要展示，之前的处理方案是将这些规则写成一个个的静态页面，用户来访问这些页面。但如果这些规则需要变更的话，就需要前端修改对应的规则页面的文案... 查看详情

文档在线预览(代码片段)

...档预览文档有多种格式，有的文档可以直接写绝对路径来实现预览功能，而有的文档则是需要下载。<p><ahref="C:Usersa.txt">文本测试</a>||<ahref="C:Users.pdf">pdf测试</a>||<ahref="C:Usersd.mp4">mp4测试</a>||<ahref... 查看详情

springboot+vue+kkfileview实现文档管理(文档上传下载在线预览)(代码片段)

...kFileViewkkFileView-在线文件预览kkFileView为文件文档在线预览解决方案，该项目使用流行的springboot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。git... 查看详情

前端在线预览pdf文件(代码片段)

前言这里用到了vue-pdf插件，预览PDF相关的操作基本都有实现；我们需要做的就是各种布局（因为需兼容已有的布局，有的地方可能需要修改），比如翻页按钮，页码展示等等；vue-pdf的GitHub地址：FranckFreiburger/vue-pdf:vue.jspdfviewer(gi... 查看详情

vue实现pdf在线预览业务(代码片段)

一、博主介绍💒首页:水香木鱼🛫专栏：后台管理系统✍简介:博主:花名“水香木鱼”，星座"水瓶座一枚"🔰格言:生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。🔋充... 查看详情

javascript实现wordexcelppt在线预览(代码片段)

  在项目中前端需要根据后台返回的文件地址实现在线预览，图片、视频、pdf等格式的文件用window.open(url)或window.location.href=url能够实现在线预览，但Word、Excel、PPT文档用同样的方式打开则是默认下载。  微软office... 查看详情

word文档在线预览解决方案

花了一整天在网上翻关于“word文档在线预览解决方案”相关的资料，感觉实现难度比较大还是用PDF来解决好了..下面列一下比较好的参考资料吧  参考资料前端实现在线预览pdf、word、xls、ppt等文件OFFICE文档转换为htm... 查看详情

端口扫描器的几种代码实现方案(代码片段)

　　搞安全的应该都知道端口扫描在渗透测试、漏洞扫描过程中的重要性，其与URL爬虫等技术构成了漏洞扫描的第一阶段，即目标信息收集。因此能否开发出一款高效稳定的端口扫描器，往往决定了漏洞扫描器的好坏。那么说到... 查看详情

js在线预览pdf文件(代码片段)

js在线预览PDF文件 一、效果预览二、实现代码：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>js图片在线预览</title><scriptsrc="$pageContext.request.contextPath/js/p... 查看详情

js在线预览pdf文件(代码片段)

js在线预览PDF文件 一、效果预览二、实现代码：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>js图片在线预览</title><scriptsrc="$pageContext.request.contextPath/js/p... 查看详情

jodconverter实现在线预览(代码片段)

...在预览是一个非常常用的供能。项目经理在会上提出必须实现改功能。首先博主先确定了一个思路：其他文档转成配pdf然后通过流发送到前台。因为前台支持pdf，可以直接预览。说干就干。下面上代码。1.方案一：使... 查看详情

jodconverter实现在线预览(代码片段)

...在预览是一个非常常用的供能。项目经理在会上提出必须实现改功能。首先博主先确定了一个思路：其他文档转成配pdf然后通过流发送到前台。因为前台支持pdf，可以直接预览。说干就干。下面上代码。1.方案一：使... 查看详情

opensource-在线office方案

...excel、ppt等格式的在线预览。kkFileView为文件文档在线预览解决方案，该项目使用流行的springboot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等。其... 查看详情