浅谈实现在线预览PDF的几种解决办法


Posted in Javascript onAugust 10, 2020

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

1、在线实现预览的方式

一开始我还是很倾向使用这种方式,希望能采用一个较为好的JS插件的方式,实现PDF的在线预览(通过Web预览),因此在Github上找到排名比较高的PDF插件

浅谈实现在线预览PDF的几种解决办法

一看排名还是很高的,那么采用它应该不错,查看自带的PDF文件,效果还是杠杠的。

浅谈实现在线预览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>

浅谈实现在线预览PDF的几种解决办法

显示的效果是正常的了,不过我在苹果手机打开Safari浏览器测试发现,不能正常显示。

浅谈实现在线预览PDF的几种解决办法

因此也不能使用来进行预览显示。

在实际的测试中,发现安卓手机的浏览器对于预览PDF也是支持不一,有些直接下载PDF,不支持预览显示。

为了避免这些问题,最好找了一个折中的方案,把PDF转换为图片进行显示,图片在不同的浏览器中显示可是没有问题的。

2、PDF转换图片进行显示

把PDF转换为图片也有很多控件处理,例如Aspose.Pdf、Spire.Pdf、 pdfiumviewer 等等,不同的第三方类库使用的方法有所差异,不过思路都很类似。

本来倾向于使用Aspose.Pdf的,不过发现转换后的发票信息还是缺失了某些中文字符或者乱码,导致不能正常显示。

后来寻找Spire.Pdf 版本以及对应的绿色版本,终于能够转换为正确的格式了,因此也就使用这个第三方控件进行转换图片使用了。

至于在线预览,我们在第一次请求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的几种解决办法

上面就是我的一个解决思路,如果您有更好的方式解决PDF在线预览问题,欢迎彼此交流。希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jsTree使用记录实例
Dec 01 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
原生JS实现pc端轮播图效果
Dec 21 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 #Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 #Javascript
js实现计算器功能
Aug 10 #Javascript
js实现盒子拖拽动画效果
Aug 09 #Javascript
js实现盒子移动动画效果
Aug 09 #Javascript
js实现弹窗效果
Aug 09 #Javascript
js实现表格数据搜索
Aug 09 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
Smarty保留变量用法分析
2016/05/23 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Java面试题:为什么要用Java
2012/05/11 面试题
给领导的致歉信范文
2014/01/13 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
供电工程专业求职信
2014/08/09 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
计划生育工作汇报
2014/10/28 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
用golang如何替换某个文件中的字符串
2021/04/25 Golang
解析目标检测之IoU
2021/06/26 Python