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

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 不等于符号

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

服务器返回的http状态码

dedecms数据库密码重置方法详解

网站建设备案流程的简单描述

企业网络营销策略和技巧

相关新闻

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

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

推荐新闻

什么是长尾关键词?

快速收集舆情信息的办法有哪些?

「菜鸟站长」网站SEO关键词优化的方法?

margin和padding属性不起作用的原因

php替换多个字符串str_replace函数

网站误封Robots该如何处理

网站建设后管理需要会哪些东西?

「seo商学院」如何通过SEO优化网站的关键词排名

「鹿泉区seo」移动端网站优化要怎么做?