浅谈实现在线预览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在线预览问题,欢迎彼此交流。希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现pdf文档在线预览功能

    针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一.引入插件 方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图 方式三:将插件直接放在static文件夹下,如图 二.前端页面代码 方式一和方式二:特点精简 <template> <div> <c

  • vue实现在线预览pdf文件和下载(pdf.js)

    最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=

  • vue中如何实现pdf文件预览的方法

    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe.embed.vueshowpdf(测试了不咋好用).pdf等,本文说一下pdf插件的使用过程. 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下: 想复制代码如下: <iframe

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

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

  • vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现. pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可). 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,

  • Vue实现在线预览pdf文件功能(利用pdf.js/iframe/embed)

    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt

  • Vue-pdf实现在线预览PDF文件

    前言 在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径. page: 当前显示的页数,比如第一页page=1 rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转. progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了. page-

  • vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决

    目录 vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题 1.先安装vue-pdf-embed 2.安装后 在使用页面引入 PS:vue3.0借用vue-pdf-embed实现在线预览pdf文件 实现效果 实现步骤 一:安装依赖 二:页面使用 三:可能报错一 问题解决 1:下载依赖 2:配置vue.config.js文件 三:可能报错二 问题原因 问题解决 vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题 本来想的很简单 觉得

  • 浅谈vue-cli加载不到dev-server.js的解决办法

    在使用vue开发过程中,难免需要去本地数据地址进行请求,而原版配置在dev-server.js中,新版vue-webpack-template已经删除dev-server.js,改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可. #webpack.dev.conf.js //首先 // nodejs开发框架express,用来简化操作 const express = require('express') // 创建node.js

  • Android实现pdf在线预览或本地预览的方法

    最近项目中需要使用在线预览pdf,并要能实现自动播放,我想这样的需求无论如何来说都是很操蛋的 由于本人水平有限,最后讨论将项目需求改成将pdf下载到本地再实现自动播放. 接下来总结下目前能够实现pdf阅读的方案,开发当中需要根据实际需求去选择相应的方案. 1.使用Google doc支持来展示word,excel,pdf,txt(WebView方式在线预览): <span style="font-size:18px;">WebView urlWebView = (WebVi

  • vue 使用 vue-pdf 实现pdf在线预览的示例代码

    背景 之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了.本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出

随机推荐