开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

实现在线预览PDF的几种解决方案

简介: 原文:实现在线预览PDF的几种解决方案 因客户需要实现PDF的预览处理,在网上找了一些PDF在线预览的解决方案,有的用PDFJS的在线预览方式,有的使用PDFObject的嵌入式显示,有的通过转换JPG/PNG方式实现间接显示的方式,开始是想通过简单的方式,能够使用JS插件实现预览最好,可是在线预览总是有一些不足,如不同浏览器的兼容问题,甚至不同的手机平台中展示的效果也不一样,不过最好还是采用了间接的方式,把PDF转换为图片展示效果,达到客户的要求。
+关注继续查看
原文:实现在线预览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实现pdf电子合同设置合同编号
现在有一些用户信息合同,要求在合同上添加合同编号,合同编号要求按照一定规则系统生成.看过很多同学的实现方案,也尝试过很多,为了方便以后有同样需求的同学可以节省时间,进行了相关内容的梳理.
0 0
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
文章的总结目标实际上就是一个前端pdf打印组件,由於能在往后的其他项目中得以快速上手,并能根据所在项目需要快速自定义扩展,因此組件非常简陋直白,文章是实践过程的记录产物,并不保证完全正确,仅作参考。
0 0
js实现灵活下载和预览网络链接pdf文件
js实现灵活下载和预览网络链接pdf文件
0 0
Vue中 前端实现生成 PDF 并下载
Vue中 前端实现生成 PDF 并下载
0 0
【SpringBoot】40、SpringBoot中使用Aspose将文件转为PDF实现在线预览
Aspose 是 .NET 和 Java 开发组件以及为 Microsoft SQL Server Reporting Services 和 JasperReports 等平台提供渲染扩展的领先供应商。
0 0
如何用Elasticsearch实现Word、PDF,TXT文件的全文内容检索?
如何用Elasticsearch实现Word、PDF,TXT文件的全文内容检索?
0 0
【前沿技术RPA】 一文学会用UiPath实现PDF自动化——锚点基准活动
UiPath在传统的RPA(Robotic process automation)的基础上,增加了See(AI通过计算机视觉阅读用户的计算机屏幕)和Think(通过机器学习来发现平台能够为用户构建什么自动化流程)从而不断帮助用户自动化构建流程,而不仅仅是用户自主发现,自主构建。并且在构建的过程当中,做到了Low-code甚至是No-code的程度,让每一位员工都可以自主使用。
0 0
【前沿技术RPA】 一文学会用UiPath实现PDF自动化——从 PDF 提取单个数据段
UiPath在传统的RPA(Robotic process automation)的基础上,增加了See(AI通过计算机视觉阅读用户的计算机屏幕)和Think(通过机器学习来发现平台能够为用户构建什么自动化流程)从而不断帮助用户自动化构建流程,而不仅仅是用户自主发现,自主构建。并且在构建的过程当中,做到了Low-code甚至是No-code的程度,让每一位员工都可以自主使用。
0 0
【前沿技术RPA】 一文学会用UiPath实现PDF自动化
UiPath在传统的RPA(Robotic process automation)的基础上,增加了See(AI通过计算机视觉阅读用户的计算机屏幕)和Think(通过机器学习来发现平台能够为用户构建什么自动化流程)从而不断帮助用户自动化构建流程,而不仅仅是用户自主发现,自主构建。并且在构建的过程当中,做到了Low-code甚至是No-code的程度,让每一位员工都可以自主使用。
0 0
前端实现PDF文件下载的两种方式
前端实现PDF文件下载的两种方式
0 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
飞天大数据&AI产品手册
立即下载
阿里云数据安全和隐私保护白皮书
立即下载
飞天大数据&AI产品手册
立即下载