使用pdf.js显示pdf文件
<script type="text/javascript" src="build/pdf.min.js"></script>
<script type="text/javascript">
PDFJS.workerSrc = 'build/pdf.worker.min.js';
</script>
<script type="text/javascript">
$.fn.showPDF = function(pdfUrl, opt){
var options = $.extend({
scale: 1,
pageNum: 1
}, opt || {}); this.each(function(){
var pdfDoc,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
$(this).append(canvas); function renderPage(num) {
pdfDoc.getPage(num).then(function (page) {
var viewport;
if( typeof(options.width) == 'number' ){
viewport = page.getViewport(1);
options.scale = options.width / viewport.width;
}
viewport = page.getViewport(options.scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).promise.then(function () {
if( $.isFunction(options.afterShow) ){
options.afterShow();
}
});
});
} if( $.isFunction(options.beforeShow) ){
options.beforeShow();
} PDFJS.getDocument(pdfUrl).then(function (doc){
pdfDoc = doc;
renderPage(options.pageNum);
});
});
} $(function(){
$('.pdfView').showPDF('1.pdf', {width: $(window).width()});
});
</script>
PDF.js https://mozilla.github.io/pdf.js/
使用pdf.js显示pdf文件的更多相关文章
- pdf.js 预览文件中文内容丢失
问题: 在.netcore中使用pdf.js,pdf中有部分中文无法显示 在浏览器控制台发现有报错 发现在pdf.view.js中url路径异常,没有指向cmaps文件,于是调整了正确的相对路径 再次 ...
- pdf.js显示合同签名问题
需求 pdf页面显示在ios11以下的环境,合同的签名印章或签字会显示不出 解决方案(初步处理参考下文引用,这里是后续具体做法) 现在通过使用pdf.js插件,参考下文,引入自己的代码 我把gener ...
- 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...
- PDF.Js的使用—javascript中前端显示pdf文件
PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...
- 基于VUE利用pdf.js实现文件流形式的pdf显示
首先推荐大家看一下这个demo vue-pdf.js-demo,这里面包含固定本地地址,远程pdf地址,通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf.(所谓文件流,就是 ...
- 使用 pdf.js 在网页中加载 pdf 文件
在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...
- fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
- base64编码后的pdf文件前端页面展示--pdf.js的应用
最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...
- vue文件流转换成pdf预览(pdf.js+iframe)
参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端 ...
随机推荐
- 0014 基于DRF框架开发(02 基类视图 GenericAPIView)
前端于对数据操作的请求基本上就分为四类:增删改查,即增加.删除.修改.查询. 而DRF把前端请求分为两个大类:带ID参数请求和不带ID参数请求. 不带ID参数请求包括:增加.分布多条查询 带ID参数请 ...
- PAT (Basic Level) Practice (中文)1031 查验身份证 (15 分)
一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...
- 【PHP】使用PHP抓取Bing每日图像并为己所用
Bing搜索的首页每天都会推送一张很漂亮的图片,把它保存下来,当做电脑桌面或是自己的网站背景图还不是美滋滋…… 今天的bing图片是这样的 既然要抓取这张图片,首先就得弄清这张图是从何而来的.经过对必 ...
- Linux一些基本命令、inode定义、软硬链接
1.创建普通文件命令:touch 命令 2.创建目录文件命令:mkdir 命令 3.删除普通文件命令:rm 命令 4.删除目录文件命令:rmdir 命令 5.给普通文件写东西命令:vim 命令 6.查 ...
- springboot~gradle4.7之后的lombok引用方法
在gradle4.7以后对于加入依赖lombok方式发生变化,gradle4.7版本以前,可以直接如下引用: compile("org.projectlombok:lombok:1.18.2 ...
- 用友UAP NC 单据新增时业务单元不能带出问题处理
用户需求新建一个主子表单据,由于刚从63环境升级到65环境,所以对于 65环境走单据流程生成节 点出的错误不了解. 直接建了集团级的主子表单据后,实施说需要的是业务单元级的主子表单据,跟用友开发沟通后 ...
- C# LINQ学习笔记四:LINQ to OBJECT之操作文件目录
本笔记摘抄自:https://www.cnblogs.com/liqingwen/p/5816051.html,记录一下学习过程以备后续查用. 许多文件系统操作实质上是查询,因此非常适合使用LINQ方 ...
- app遮罩层--网赚
css .mask{display: none; position: fixed; width: 100%; height: 100%; top:0; background: rgba(0, 0, 0 ...
- CCF CSP 201803-2 碰撞的小球
题目链接:http://118.190.20.162/view.page?gpid=T72 问题描述 数轴上有一条长度为L(L为偶数)的线段,左端点在原点,右端点在坐标L处.有n个不计体积的小球在线段 ...
- [CF1034A] Two Rabbits - 数学
判断能否整除即可 #include <bits/stdc++.h> using namespace std; int x,y,a,b; int main() { int t; ios::s ...