前端使用pdf.js预览pdf文件_gwj_20200323_180012

最新推荐文章于 2024-06-05 01:32:57 发布

Web打印

最新推荐文章于 2024-06-05 01:32:57 发布

阅读量1.3k

点赞数

文章标签： html html5 javascript jquery

本文链接：https://blog.csdn.net/xunchima123/article/details/105054480

版权

前端使用pdf.js预览pdf文件_gwj_20200323_180012

本demo作者信息:
山东易桥智能科技有限公司 http://www.yiqiao.net.cn

HttpPrinter-网页打印插件 http://www.HttpPrinter.com

本demo下载地址: https://httpprinter.lanzous.com/iakhzob

layer下载地址 http://layer.layui.com/

我使用的版本是 layer-v3.1.1

PDF.js可在官网下载地址：http://mozilla.github.io/pdf.js/

我使用的版本是 pdfjs-2.4.456

在web目录下有viewer.js文件

第一步:

3494
value: "compressed.tracemonkey-pldi-09.pdf",

改为 (好像不该也没关系)
value: "",

第二步:

1731行禁用一下共 3行,目的是禁用后可以跨域

//if (origin !== viewerOrigin && protocol !== "blob:") {
// throw new Error("file origin does not match viewer's");
//}

使用方法1 :

在按钮点击事件中调用window.open()

使用方法二:

layer 弹出pdf文件

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name=referrer content=never>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="renderer" content="webkit">
   <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
   <script src="js/layer/layer.js"></script>
</head>
<body>
<button οnclick="preview()">PDF预览</button>
</body>
<script>
function preview() {
console.log('test');

       //var pdf = 'https://axhl-test-1252661357.cos.ap-shanghai.myqcloud.com/pdf/1536742627489-310270d9-4e12-2640-8cb6-cfc07a6f6d1b.pdf';
       var pdf = '../../../example2.pdf';
           //var pdf = 'http://localhost/pdfjs2/pdfjs_gwj/example1.pdf';

       var htmlurl   = './js/pdf/web/viewer.html?file=' + pdf;
       layer.open({
           type: 2,
           title: '欢迎页',
           maxmin: true,
           area: ['800px', '500px'],
           content: htmlurl,
           //content: 'http://layer.layui.com/test/welcome.html',
           end: function(){
           layer.tips('Hi', '#about', {tips: 1})
           }
       });

}
</script>
</html>

打印效果

Web打印

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端使用pdf.js预览pdf文件_gwj_20200323_180012

前端使用pdf.js预览pdf文件_gwj_20200323_180012本demo作者信息:山东易桥智能科技有限公司http://www.yiqiao.net.cnHttpPrinter-网页打印插件 http://www.HttpPrinter.com本demo下载地址: https://www.lanzous.com/iakhzoblayer下载地址 http://la...
复制链接

扫一扫