浅谈实现在线预览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
Mar 09 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
js自定义回调函数
2015/12/13 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
Python中的hypot()方法使用简介
2015/05/18 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Python读写Excel表格的方法
2021/03/02 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
应聘教师自荐信
2013/10/12 职场文书
擅自离岗检讨书
2014/02/11 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
交通违章检讨书
2014/09/21 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2014年教学工作总结
2014/11/13 职场文书
端午节寄语2015
2015/03/23 职场文书
Python预测分词的实现
2021/06/18 Python
新手入门Mysql--sql执行过程
2021/06/20 MySQL