JS通过使用PDFJS实现基于文件流的预览功能
需求:
使用JS实现PDF文件预览功能
备选方案:
- 使用ViewerJS,官网 http://viewerjs.org/
- 使用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实现基于文件流的预览功能的更多相关文章
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- React + js-xlsx构建Excel文件上传预览功能
首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...
- 用原生JS实现多张图片上传及预览功能(兼容IE8)
最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- 上传图片,多图上传,预览功能,js原生无依赖
最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...
- Django文件上传三种方式以及简单预览功能
主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- 【扬中集训DAY5T1】 交换矩阵
[题目链接] 点击打开链接 [算法] 链表,对于每个点,存它的上,下,左,右分别是谁 [代码] #include<bits/stdc++.h> using namespace std; # ...
- 开启sqlplus中执行计划
在sqlplus中我们一般用Autotrace来查看执行计划,从而对于一些语句执行过程分析,开展优化工作.这里就演示一下如何将autotrace权限授予给普通的用户,以scott用户为例(set au ...
- 图片加水印文字,logo。生成缩略图
简单JSP代码 图片加水银文字 try { String path = request.getRealPath("images\\01.jpg"); out.print(path) ...
- SimpleDateFormat并发隐患及其解决
此文已由作者姚太行授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. SimpleDateFormat被大量使用于处理时间格式化过程,由于该类在创建时会指定一个pattern用于 ...
- E20180404-hm
reject vt. 拒绝; 排斥; 抛弃,扔掉; 吐出或呕吐; conditioner n. 调节器,调节装置 fabric n. 织物; 布; 构造; (建筑物的) 结构(如墙.地面.屋顶):质 ...
- (水题)洛谷 - P1093 - 奖学金
https://www.luogu.org/problemnew/show/P1093 #include<bits/stdc++.h> using namespace std; #defi ...
- bzoj 3109: [cqoi2013]新数独【dfs】
按3x3的小块dfs,填数的时候直接满足所有条件即可 #include<iostream> #include<cstdio> #include<cstring> u ...
- Windows系统下安装fis3
在讲怎么安装FIS3之前我们先来了解一下FIS3 FIS3 是什么? FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发 ...
- Mantis优化改造(功能篇)
共分为两篇,功能篇和技术篇. 时间大约是2016年冬天. 考虑搭一个用于Bug管理和追踪的系统. 综合比较下,选择了小巧的开源工具,Mantis. 在源码基础上,做代码修改,完成了定制版的优化改造. ...
- hdu3938 Portal 离线+并查集
#include <cstdio> #include <cstring> #include <algorithm> using namespace std; int ...