需求:

使用JS实现PDF文件预览功能

备选方案:

  1. 使用ViewerJS,官网  http://viewerjs.org/
  1. 使用PDFJS,官网  https://mozilla.github.io/pdf.js/

结论:

通过研究发现,Viewer JS预览pdf文件,其pdf文件只能url地址,不支持获取文件流到客户端,生成blob地址预览。而PDFJS能够支持

代码实践:

<div class="modal inmodal fade" id="previewModal" tabindex="-1" role="dialog" aria-hidden="true">

    <div style="width:60%;height:90%" class="modal-dialog modal-lg">

        <div class="modal-content">

            <div class="modal-body" style="padding:0; height:700px">

                <iframe id="iframePreview" width='100%' height='700' allowfullscreen webkitallowfullscreen></iframe>

            </div>

        </div>

    </div>

</div>

this.previewFile = function(fileUrl,fileType) {
                        if (fileType === 'pdf') {
                        var tmpUrl = 'vendor/pdfjs/web/viewer.html?file=' + encodeURIComponent(fileUrl);
                        $("#iframePreview").attr("src", tmpUrl);
                        angular.element('#previewModal').modal();
                    }
                };

JS通过使用PDFJS实现基于文件流的预览功能的更多相关文章

  1. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  2. 通过file文件选择图片预览功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. React + js-xlsx构建Excel文件上传预览功能

    首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...

  4. 用原生JS实现多张图片上传及预览功能(兼容IE8)

    最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...

  5. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  6. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  7. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  8. 上传图片,多图上传,预览功能,js原生无依赖

    最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...

  9. Django文件上传三种方式以及简单预览功能

    主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. UVA - 10004 Bicoloring(判断二分图——交叉染色法 / 带权并查集)

    d.给定一个图,判断是不是二分图. s.可以交叉染色,就是二分图:否则,不是. 另外,此题中的图是强连通图,即任意两点可达,从而dfs方法从一个点出发就能遍历整个图了. 如果不能保证从一个点出发可以遍 ...

  2. Tomcat 系统架构与设计模式之一

    Tomcat 系统架构与设计模式,第 1 部分: 工作原理 来自:http://www.ibm.com/developerworks/cn/java/j-lo-tomcat1/index.html 这 ...

  3. HihoCoder1706 : 末尾有最多0的乘积(还不错的DP)

    描述 给定N个正整数A1, A2, ... AN. 小Hi希望你能从中选出M个整数,使得它们的乘积末尾有最多的0. 输入 第一行包含两个个整数N和M. 第二行包含N个整数A1, A2, ... AN. ...

  4. POJ1474:Video Surveillance(求多边形的核)(占位)

    A friend of yours has taken the job of security officer at the Star-Buy Company, a famous depart- me ...

  5. [Selenium] Android HTML5 中 Web Storage

    在 HTML5 中,Web Storage 这个新特性可让用户将数据存储在本地的浏览器中.在早期的浏览器中可通过 cookies 来完成这个任务,但 Web Storage 会更加安全和高效,且 We ...

  6. PostgreSQL新手教程

    自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作系 ...

  7. ORA-01152: 文件 1 没有从过旧的备份中还原

    转自:http://blog.itpub.net/8520577/viewspace-1255794/ 做了一个全备 RMAN> show all; 使用目标数据库控制文件替代恢复目录db_un ...

  8. [ssh]记ssh的几种玩法

    得到一台Linux的服务器,我们可以进行以下几种玩法: 先讲一讲几个参数: -f    要求 ssh在执行命令前退至后台.它用于当ssh准备询问口令或密语,但是用户希望它在后台进行.该选项隐含了-n选 ...

  9. $(function() {}),即$(document).ready(function(),什么时候执行?以此为准

    $(function() { //执行操作 }); $(function() {}) 是$(document).ready(function()的简写. 这个函数什么时候执行的呢? 答案:DOM加载完 ...

  10. bzoj 1058: [ZJOI2007]报表统计【set】

    我想写FHQtreap的!是set自己跑进代码的!因为太好写了 是有点慢--洛谷上不吸氧会T一个点 就是,用一个set p维护所有点值,ans维护MIN_SORT_GAP的答案,每次insert一个点 ...