<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文件的更多相关文章

  1. pdf.js 预览文件中文内容丢失

    问题: 在.netcore中使用pdf.js,pdf中有部分中文无法显示 在浏览器控制台发现有报错 发现在pdf.view.js中url路径异常,没有指向cmaps文件,于是调整了正确的相对路径 再次 ...

  2. pdf.js显示合同签名问题

    需求 pdf页面显示在ios11以下的环境,合同的签名印章或签字会显示不出 解决方案(初步处理参考下文引用,这里是后续具体做法) 现在通过使用pdf.js插件,参考下文,引入自己的代码 我把gener ...

  3. 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误

    首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...

  4. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

  5. 基于VUE利用pdf.js实现文件流形式的pdf显示

    首先推荐大家看一下这个demo vue-pdf.js-demo,这里面包含固定本地地址,远程pdf地址,通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf.(所谓文件流,就是 ...

  6. 使用 pdf.js 在网页中加载 pdf 文件

    在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...

  7. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  8. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

  9. vue文件流转换成pdf预览(pdf.js+iframe)

    参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端 ...

随机推荐

  1. F.Three pahs on a tree

    思路 两次bfs找出树的直径并处理出端点离树上各叶子节点的距离,在直径上找一点的子树叶子p3,使得dis(p1,p2) + dis(p2,p3) + dis(p1,p3)最大 易知上式是路径实长的两倍 ...

  2. 全网VIP视频解析接口

    全网VIP视频在线解析可以免费观看[腾讯vip视频.爱奇艺vip视频.优酷VIP视频.土豆VIP视频.乐视VIP视频.芒果VIP视频]等等...可以vip免费观看.去广告等等. https vip视频 ...

  3. SpringBoot的应运而生

    随着动态语言的流行(Ruby,Groovy,Scala,Node.js),java的开发显得格外的笨重,繁多的配置,低下的效率,复杂的部署流程以及第三方技术集成难度大.springboot应运而生,使 ...

  4. BZOJ 2467: [中山市选2010]生成树

    有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈.在中心的这个n边圈的每一条边同时也是某一个五角形的一条边,一共有n个不同的五角形.这些五角形只在五角形圈的中心的圈上有公共的 ...

  5. 微信小程序判断input是否为空

    微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程wxml代码 <view cla ...

  6. 使用win10 IIS 发布局域网网站

    1.安装IIS 按win+R键,输入control,打开控制面板,点击程序,点击 启用或关闭windows 功能,将Internet Information Service勾上,把下属的asp.net ...

  7. 2020牛客寒假算法基础集训营5 G.街机争霸 (bfs)

    https://ac.nowcoder.com/acm/problem/201961 预处理出僵尸走的路径,僵尸走的周期长度应该为2k-2,在普通的bfs基础上加上一维表示时间,从当前位置x,y和和时 ...

  8. 详解C/C++中的的:#pragma pack(push) 、#pragma pack(pop) 和#pragma pack()

    前言 我们知道结构体内存对齐字节可以通过#pragma pack(n) 的方式来指定. 但是,有没有想过一个问题,某些时候我想4字节对齐,有些时候我又想1字节或者8字节对齐,那么怎么解决这个问题呢? ...

  9. Redis Desktop Manager 连接不上redis的问题

    1.需要启动redis,进入后测试,ping,回应pong,说明redis可用 启动redis的代码: redis-server /myredis/redis.conf redis-cli 如果还是连 ...

  10. 题解【AcWing177】噩梦

    题面 考虑双向广搜. 我们需要记录男孩和女孩的当前位置,并且每次都进行扩展. 记录一个数组 \(st[i][j]\) . 如果 \(st[i][j]=0\) ,说明 \((i,j)\) 还没有被男孩和 ...