Extjs4:无需插件浏览pdf文件

这里要介绍一个很实用的工具,只用javascript,无需安装浏览器插件就可以浏览PDF文件,在之前的一个项目中查看pdf文件需要另外安装一个第三方工具,在项目部署时需要配置好相应的路径,相对会麻烦一些,当然配置越少部署起来越便捷,不用去检查太多的配置项。还是和之前一样,先看下需要实现的效果,
在Chrome查看

在FF中查看

为了实现以上的效果,我们需要准备的:

1) Extjs SDK.

2)下载pdf.js,pdf渲染时使用了Mozilla的pdf.js库,所以需要下载其中的几个文件(https://github.com/mozilla/pdf.js).

3)按照之前的一个实例新建一个工程pdfviewdemo,

查看例子中引用到的文件,并没有把所有的都加到项目中,新增了pdfjs和ux文件夹,在pdfjs目录下的springroo.pdf是用来查看的pdf文件。在index.jsp中引入需要的资源文件

在app.js中加入pdf查看panel,需要注意的是pdf的路径,

Ext.Loader.setConfig({enabled: true});

Ext.onReady(function() {

	var pdfItem = Ext.create('Ext.ux.panel.PDF', {
        width    : 800,
        height   : 600,
        pageScale: 1,      // Initial scaling of the PDF. 1 = 100%
        src      : 'pdfjs/springroo.pdf' // URL to the PDF - Same Domain or Server with CORS Support
    });

	var win = Ext.create('Ext.window.Window', {
	    title: '浏览PDF,无需插件',
	    height: 640,
	    width: 800,
	    layout: 'fit',
	    items: [pdfItem]
	});
	win.show();
});

项目启动后,就可以看到效果了。
OK~~

 




    分享到:









点赞
  1. lanbinsong 说道:

    您好,能给我传一份原码吗?非常感谢!我的邮箱 lanbinsong@163.com

    1. 飘散 说道:

      已经发送,请查收下邮件

  2. 枯木 说道:

    能分享 demo源码 Sawyerjj@163.com 谢谢

    1. 飘散 说道:

      已经发送,请查收

  3. 随便起个名字 说道:

    同求demo!jane-jcy@outlook.com

    1. 飘散 说道:

      已经发送。

    1. 飘散 说道:

      已经发送,请查收!

  4. 不知道名字 说道:

    我的怎么中文乱码呢?高人指点

    1. 飘散 说道:

      是哪里的中文乱码?

  5. 三五笑话 说道:

    新年马上到了,提前祝新年快乐,博客越办越好!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注


*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>