pdf.js实际应用pdf文件在手机版浏览

最新推荐文章于 2024-03-14 09:39:36 发布

木小蛮

最新推荐文章于 2024-03-14 09:39:36 发布

阅读量3.4k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/xiaoxiaoshuai__/article/details/72579776

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

pdf.js实际应用pdf文件在手机版浏览

之前百度pdf.js怎么用，找到的基本都不能用，后来研究了一下研究出来了直接粘贴代码就可以用，小白适用，大神请跳过

这个要在线上测试，线下是不能成功

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<script src="js/pdf.js"></script>
<script src="js/pdf.worker.js"></script>
</head>
<body class="exe ti">
<div id="bao">
</div>

<script id="script">
  var url = 'files/1.pdf';

var Obody=document.getElementById("bao");
var num;
var idArray=[0];
var b=1;
  PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
       num=pdf.pdfInfo.numPages;
        for(var i=1;i<=num;i++){
          var op=document.createElement("canvas");
              op.id="the-canvas"+i;
              Obody.appendChild(op);
          idArray[i]=i;
          pdf.getPage(i).then(function getPageHelloWorld(page) {
            b++;
            var scale = 1.7;
            var viewport = page.getViewport(scale);
            var canvas = document.getElementById("the-canvas"+b);
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            page.render(renderContext);
            return b;
          });
        }
    setTimeout(function(){
      document.getElementById("xia").style.color="#0d65a3";
    },1000);
  });
</script>
</body>
<html>

下载pdf.js
下载pdf.worker.js

木小蛮

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
pdf.js实际应用pdf文件在手机版浏览

pdf.js实际应用pdf文件在手机版浏览之前百度pdf.js怎么用，找到的基本都不能用，后来研究了一下研究出来了直接粘贴代码就可以用，小白适用，大神请跳过这个要在线上测试，线下是不能成功 //pdf.js文件 //pdf.worker.js文件 var url = '../pdf/1.pdf'; //文件位置 var Obody=document.getElementById("bao"); var
复制链接

扫一扫