石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 建站经验 >

pdf在线浏览插件pdf.js使用说法举例

发表日期:2020-07-06 22:55文章编辑:优搜客浏览次数: 标签: js教程|    

pdf.js使用举例说明
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>'Hello, world!' example</title>
</head>
<body>
<h1>'Hello, world!' example</h1>
<canvas id="the-canvas" style="border:1px  solid black"></canvas>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script id="script">
  //假如从远程服务器提供了绝对网址,配置cors在头部
  var url = './helloworld.pdf';
  // The workerSrc property 应该被明确指定
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    '../../node_modules/pdfjs-dist/build/pdf.worker.js';
  //异步的加载PDF文件
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    //接收第一页
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale, });
      //使用PDF页面规格加载画布
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      //渲染PDF页面
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
</script>
<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
  document.getElementById('code').textContent =
      document.getElementById('script').text;
</script>
</body>
</html> 

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jzjy/11532.html

网站设计案例推荐

热门新闻

「石家庄网站建设」企业建网站如何提高网页打开速度

手机网站建设技巧及推广方法

「不等于符号」sql 不等于符号

服务器返回的http状态码

做好站内优化的重要性有哪些?

phpcms显示验证码出错怎么办?

CSS解决文字与图片不能水平居中对齐的问题

网站运营推广中哪些问题常常会遇到?

相关新闻

几种常见的JS操作CSS的方法

js电脑端跳转到收手机端代码

推荐新闻

404页面对SEO优化影响有多大?

网站取消备案和注销备案到底有什么区别?

学校网站建设方案里面主要包含哪些内容呢?

企业网站建设中有哪几个重要点?

石家庄网站关键词优化之网站词库企业关键词的建立

网页加载缓慢怎么办?

超链接去掉下划线的几个方法

【seo优化公司】快速提升网站权重的几个方法?

石家庄SEO:PR值是什么意思?