精华内容
下载资源
问答
  • pdf.js在线预览pdf

    2019-09-18 10:38:40
    一款来自火狐的开源在线预览pdf的工具,已经经过验证,支持IE浏览器、火狐浏览器、谷歌浏览器等。
  • maven项目工程小Demo,实现pdf.js进行文件预览pdf
  • pdf.js插件实现在线预览pdf文件。直接利用这个插件放在项目里。然后使用./js/pdf/web/viewer.html?file=' + pdf的文件地址。可以看介绍文章在这里啊https://blog.csdn.net/qq_33769914/article/details/108223002
  • pdf.js pdf在线预览组件,支持IE,chrome多个浏览器,支持下载、打印功能。
  • Java web使用pdf.js在线预览远程服务器上的pdf文件,包里有pdf.js资源文件以及使用文档
  • pdf.js在线预览demo

    2018-01-06 21:01:37
    本例是pdf.js的demo,可在浏览器运行,无需其他任何环境配置。
  • 主要为大家详细介绍了vue实现在线预览pdf文件和下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • pdf.js pdf预览插件

    2018-09-14 17:15:51
    html实现pdf预览插件,小程序web-view的pdf预览解决方法
  • pdf.js字体包
  • 主要介绍了vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 看了很多大神的博客,自己改造了下,终于做出了可以在线预览远程FTP服务器上的PDF文件的功能。大概花了1天时间,遇到很多坑。所以总结下,写了个文档,很详细,一步一步来就行了
  • 基于pdf.js的移动端,PC端在线pdf文件预览,支持跨域的源码,兼容性强,不同浏览器均可完美使用,最低支持IE6,一键适配
  • vue使用pdf.js实现在线预览pdf文件

    千次阅读 2020-07-17 18:18:38
    vue使用pdf.js实现在线预览pdf文件1.到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download 下载pdfjs插件包,注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。2.使用方法3.出现问题 ...

    1.到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download 下载pdfjs插件包,注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。

    在放入项目中时,建议放在public文件夹中,如图:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200717181227179.png)
    

    这样在使用的是就是使用本地资源了,而且路径比较容易找到。

    2.使用方法

    在 iframe 标签中使用。假设 pdfjs 包放在如图目录 …/plugin 下。则写法如下:

    <iframe id="previewpdf" src=""./plugin/web/viewer.html?file="+url+&#
    展开全文
  • PDF.js 高版本不兼容安卓4.3以下系统的,本demo使用PDF.js1.4.20和高版本的PDF.js ,可以兼容安卓4.3以下或以上的系统,欢迎下载学习
  • web在线查看PDF文件,PDF.js文件,网页开发时需要预览pdf文件时可以用这个JS,很方便,通俗易懂,很强大的一个pdf插件
  • 文件中包含openoffice所需的jar包以及前端预览pdf所需的pdf.js
  • PDF.js在线预览pdf插件

    2015-06-03 17:12:42
    PDF.js是一个pdf在线预览插件,可以很方便的查看pdf内容,还可以下载在线pdf
  •   最近开发项目时有个需求是在线预览 PDF 文件,然后百度了好久选出来一个功能比较强大并且好用的插件 PDF.JS,GitHub 下载地址(不知道最近咋了每次都想唠一会水一会)差点忘了说了,本文主要是讲使用过程中的...

    前言

      最近开发项目时有个需求是在线预览 PDF 文件,然后百度了好久选出来一个功能比较强大并且好用的插件 PDF.JS,GitHub 下载地址(不知道最近咋了每次都想唠一会水一会)差点忘了说了,本文主要是讲使用过程中的常见错误,嗯,次要是讲咋使用

    安装

      下载版本的话我们下在稳定版本的就可以了,没必要非追求最新版,当然也可以下载最新版本的,用法都一样,下载好了之后就找一个位置解压就可以了,或者直接放入程序里边,我们主要用到里边的 viewer.js 和 viewer.html 文件在这里插入图片描述
      打开文件夹,把这两个文件放进程序,一个是 build,一个是 web 文件夹,不过我建议整个文件夹都放进去!到这差不多安装过程就 ok 了,viewer.html 文件里边有默认的 PDF 文件在这里插入图片描述
      测试方法 window.open(' ../pdf/web/viewer.html')

    使用

      打开我们刚刚放入程序的文件,打开 web 文件目录,打开 viewer.js 文件找到他默认展示的 PDF 文件的路径改为 value:’’ ( 也可以不修改 ) 大概在 4250 行左右,不同的版本可能行数不一样,以实际名称为准 defaultUrl !!! 在这里插入图片描述
      我们想要调用这个 JS 来预览 PDF 应该咋办呢???方法跟上方测试方法差不多,只不过多加了一个条件
      调用方法:windows.open("/pdf/web/viewer.html?file=file.pdf");
      这样些其实有一个问题,就是它只能读取你 web 目录下的文件,如果想要读取你本地文件或者服务器文件咋办呢? 当然是通过流的方式输出咯!

    获取本地文件 / 服务器文件(移动端预览)

      前端写法:通过点击事件触发预览

    previewURL: 项目地址路径
    filePath: 要打开的项目
    encodeURIComponent:用于 url 特殊字符的转译(比如 : ; / ? : @ & = + $ , # 这些用于分隔 URI 组件的标点符号)

    // 点击调用预览方法
    function xx(filePath){
    	var previewURL= "127.0.0.1:8080/";
    	window.open('../pdf/web/viewer.html?file='+encodeURIComponent(previewURL+"/test?url="+filePath));
    }
    

    后端写法:拿到文件地址,通过流的方式输出到移动端页面显示

    // 通过文件流的方式预览 PDF 文件
    @RequestMapping(value = "test")
    public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
    	// 获取路径
        String filePath = request.getParameter("url");
        File file = new File(filePath);
        byte[] data = null;
        try {
        	// 编辑请求头部信息
            // 解决请求头跨域问题(IE兼容性 也可使用该方法)
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setContentType("application/pdf");
            FileInputStream input = new FileInputStream(file);
            data = new byte[input.available()];
            input.read(data);
            response.getOutputStream().write(data);
            input.close();
        } catch (Exception e) {
        }
    }
    

    测试界面

    在这里插入图片描述

    常见问题

    1.跨域错误:file origin does not match viewer’s
       解决方式:找到 viewer.js 中下方的这段代码注释掉,大概在 1793 行附近,
       PS:因为每个人的版本不一样,建议使用搜索
    在这里插入图片描述
    2.找不到文件错误:这个问题原因是因为没有获取到你本地或者服务器文件,也就是 pdf > web 目录里没有这个 pdf ,因为它默认是获取这个目录下的 pdf 文件
    在这里插入图片描述
       解决方式:获取本地文件或者服务器文件路径,通过流的方式输出到页面上

    3.文件损坏无法显示问题:出现这个问题一般都是你的 url 没有进行转码就直接请求到浏览器了,然后 url 存在的特殊字符会会让浏览器误认为你这个不是一个完整的链接
    在这里插入图片描述
       解决方式:查看前端访问的路径是否使用 encodeURIComponent 转码

    番外话题

      如何隐藏插件自带的下载和打印功能???打开你的 viewer.html 文件,搜索 <button id="download" 在这个 button 按钮加上一个属性 style="visibility:hidden" 就 ok 了,如下图
    在这里插入图片描述
    在这里插入图片描述
      我浅薄的记忆中好像还有遇到的别的错误,但我想不起来了,就先记录这些内容,到时候想起来再补充!!!欢迎留言指教

    展开全文
  • pdf.js使用在线预览pdf文件

    万次阅读 多人点赞 2017-03-20 15:11:37
    最近公司需要pdf在线预览,于是找到pdf.js这个插件 , 好处就在于 pc端和移动端 不需要花过多的精力去调。 1:需要到官网下载源码:https://mozilla.github.io/pdf.js/   2:将源码加入到项目中目录如下: 在web...

    最近公司需要pdf在线预览,于是找到pdf.js这个插件 , 好处就在于 pc端和移动端 不需要花过多的精力去调。

    1:需要到官网下载源码:https://mozilla.github.io/pdf.js/ 

            2:将源码加入到项目中目录如下:

    在web下有如下:


    这里我们需要改动viewer.js ,打开其中有一段:


    只需要将DEFAULT_URL  默认值去掉。

    3:自定义一个页面,我这里是test3.html  页面代码如下:


    这里我将函数封在js中  调用这个函数需传入viewer.html路径。



    这里打开viewer.html页面  ,因为设计到跨域访问pdf的问题,我们将pdf以文件流的方式传入 ,所以需要后台代码处理 ,如下:



    这样我们就处理完了,看下效果 pc端:



    移动端:

    这是我们就使用插件自带的功能。如果想屏蔽下载打印这些 可以在viewer.html中修改。

    小弟刚开始研究的时候,为了解决跨域的问题头都大了,网上资料太少,不过研究出来的喜悦只能自己能体会到。大笑

    第一次写博客 ,自己都感觉好潦草 , 就这样吧!

    对了,附上pdf.js源码 !


    我勒个去 , 附件不会上传  , 你说我是有多笨呀!

    展开全文
  • 因项目开发需要在线展示 PDF文件,为解决 PDF文件 在浏览器打开后电子签章、电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题;pdf.js框架为HTML5,无需任何本地支持,兼容性极好只要浏览器支持 HTML5 ...

    因项目开发需要在线展示 PDF文件,为解决 PDF文件 在浏览器打开后电子签章、电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题;

    pdf.js框架为HTML5,无需任何本地支持,兼容性极好只要浏览器支持 HTML5 即可(据说 IE9 以上都是可以的);

    当时解决该问题探索时间比较长,其实也并没有想象的那么困难比较简单特此记录下此博客,以便大家参考!

    pdf.js git地址 : https://github.com/mozilla/pd...

    (也可上 pdf.js官网自行下载包) 有相关基本简介、获取源码及构建

    以自行下载包为例

    项目构建后 会出现如下两个静态文件夹:

    8d15332ac240f16a0a01d0b08a7b4f3f.png

    build目录是PDF.js的核心文件,web目录是PDF.js的配置与显示文件

    579e285077dd7d50addced31414c6abe.png

    viewer.html是用来显示PDF文件的跳转页面,viewer.js是其对应配置文件,在viewer.js中:

    e76f7c9dae8040513239aa08c774ade6.png

    静态替换PDF文件路径 此时便可通过访问viewer.html对应路径查看并操作当前 静态PDF文件路径

    有的小伙伴会说了这根本满足不了当前项目需求嘛 谁的PDF文件会是静态的 对喽 想到这就说明大家在思考了那么接下来我就向大家简单介绍下动态生成的PDF文件地址该如何赋值~

    首先要注意我们的PDF文件有两种方法可以带入进viewer.html中展示将指定PDF文件放在 web文件夹下 通过指定引入静态文件方式引入

    将PDF文件放入服务上以服务地址读取

    下面重点讲下 通过接口返回地址拿到地址并展示废话不多说直接上代码:

    69a63d6d2053abcd32859adc7348ef1e.png

    b7d659231faedeb86a06b0cca10fc827.png

    同时我么们还要将源码中的判断跨域代码注释掉

    当一切做完后我们就可以实现PDF文件页面浏览但还会发现签章问题没有得到解决 电子生成签章会不显示 我们可以通过注释pdf.worker.js源码的方式来解决该问题

    101d8b604a7bf294fd0feaf0f2010754.png

    一般情况下,注释掉了这三行代码,不显示的签名或者电子签章就该显示了。但是 注释了这三行代码,还是报错误,而且是 util.js 报的

    所以第二种方法 我们在 pdf.worker.js 中找一下报错位置

    ec00044a7fde5519a68fde9c28bde4b8.png

    与控制台报错警告很像吧,求证后就是他接下来就阻断他 Perfect

    5e7ff3cebc0398a3f0bb32329124afe7.png

    到这儿今天的内容就差不多了,希望能对你们有帮助!!!

    b739ec46bb5c46d9c0aa4ce35ba1ea56.png

    关于找一找教程网

    本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。

    本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。

    [PDF 文件在线预览(pdf.js 使用教程)]http://www.zyiz.net/tech/detail-150261.html

    展开全文
  • pdf.js Demo 纯js实现PDF在线预览及打印

    热门讨论 2017-11-10 15:13:33
    pdf.js Demo 纯js实现PDF在线预览及打印 可控制页面缩放 打开本地文件
  • jquery实现网页在线预览pdf文件js包,使用简单只需引入该js文件,并在页面添加(完美高清中文版).pdf"></a> 即可
  • jquery.media.js 插件 可以在html网页预览和查看pdf文件
  • 浅谈PDF.js使用心得

    2020-12-11 16:21:21
    一次在开发微信预览保单的时候所使用到的,由于安卓手机浏览器不支持解析PDF,所以才用了PDF.js来解析PDF并展示。 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持。 在线演示...
  • 使用PDF.JS在线预览PDF文件

    万次阅读 2018-05-04 18:08:15
    最近项目用到PDF文件在线预览功能,博主在网上搜寻一番决定使用PDF.js插件。首先需要引入插件库,根据个人所需下载版本,博主使用的是v1.9.426版本。PDF.js插件下载地址:http://mozilla.github.io/pdf.js/1、博主...
  • html在线预览pdf(pdf.js)

    2015-11-20 14:46:39
    html在线预览pdf(pdf.js)不支持ie8以下
  • pdf文件预览,ie中pdf预览,下载,打印;浏览器中预览pdf,支持ie,基于pdf.js开发的demo,下载即用。
  • 基于pdf.js的移动端在线pdf文件预览,支持跨域的源码,兼容性强,不受浏览器约束,还可以将pdf转成图片。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,036
精华内容 4,414
关键字:

pdf.js使用(在线预览pdf文件)